Объединить цвета границ для тега раздела с помощью CSS - PullRequest
Новая
       6

Объединить цвета границ для тега раздела с помощью CSS

0 голосов
/ 25 мая 2018

Я создал центрированную слегка повернутую границу раздела.Кроме того, я дал каждой стороне раздела разные цвета.Вот как выглядит мой основной код: 

body{
    background-color: #594451;
    color: #fff;
}

.boxed{
    position: absolute;
    margin:auto;
    /* border: 3pc solid rgba(255, 255, 255 ,1); */
    border-left: solid rgba(127, 203, 170, 1) 3pc;
    border-right: solid rgba(186, 179, 173, 1) 3pc;
    border-bottom: solid rgba(0, 171, 238, 1) 3pc;
    border-top: solid rgba(229, 99, 57, 1) 3pc;
    height: 20pc;
    width: 20pc;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    
}
<h1>Welcome to Rahul's Lab</h1>
    <section class="boxed">
        <!-- <p>This will contain the box properly</p> -->
    </section>

Можно ли добиться того, чтобы границы перекрывались друг с другом?Это возможно, просто используя CSS или я должен создать отдельный раздел / div для этого? HTML & CSS Разработка и создание веб-сайтов

Справка: Обложка HTML и CSS Разработка и создание веб-сайтов Джона Дюкетта.

Ответы [ 4 ]

0 голосов
/ 25 мая 2018

Вот еще одно решение с градиентом и без необходимости mix-blend-mode.Идея состоит в том, чтобы сделать каждый угол с помощью градиента, чтобы вы могли легко контролировать цвет и моделировать перекрытие: 

.box {
  margin:50px;
  height:200px;
  width:200px;
  box-sizing:border-box;
  
  background:
    /*The 4 corners*/
    linear-gradient(#905c3f,#905c3f) top left/20px 20px,
    linear-gradient(#b04d32,#b04d32) top right/20px 20px,
    linear-gradient(#02a9ae,#02a9ae) bottom left/20px 20px,
    linear-gradient(#0085aa,#0085aa) bottom right/20px 20px,
    
    /*The 4 borders*/
    linear-gradient(#e6663a,#e6663a) top/100% 20px,
    linear-gradient(#01adf0,#01adf0) bottom/100% 20px,
    linear-gradient(#7fcaac,#7fcaac) left/20px 100%,
    linear-gradient(#bab1ae,#bab1ae) right/20px 100%;  
   background-repeat:no-repeat;
   
   transform:rotate(45deg);
}
<div class="box">

</div>
0 голосов
/ 25 мая 2018

Перекрытие границ невозможно ...

... но вот решение для создания вашего эффекта только с помощью CSS, используя:

  • Несколько linear-gradient s для созданияbackground
  • background-blend-mode для смешивания цветов в углах

⋅ ⋅ ⋅

Обновлен фрагмент:
Использование фонового синтаксиса, как здесь сделал Темани https://stackoverflow.com/a/50526694/5061000

.boxed {
  position: absolute;
  margin: 5pc auto; /* Modified to better fit in tiny snippet */
  --border-pc: 10%; /* You could even use a CSS variable to store the width if you want to be able to modify it easily. Or the colors. Or both. */
  background:
    /* Shorthand syntax used below: image position/sizeX sizeY */
    linear-gradient(rgba(229, 099, 057, 1), rgba(229, 099, 057, 1)) top   /100% var(--border-pc), /* Orange with CSS var */
    linear-gradient(rgba(000, 171, 238, 1), rgba(000, 171, 238, 1)) bottom/100% var(--border-pc), /* Blue */
    linear-gradient(rgba(127, 203, 170, 1), rgba(127, 203, 170, 1)) left  /var(--border-pc) 100%, /* Green */
    linear-gradient(rgba(186, 179, 173, 1), rgba(186, 179, 173, 1)) right /var(--border-pc) 100%; /* Gray */
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  height: 20pc;
  width: 20pc;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotate(45deg);
}
<section class="boxed">
  <!-- <p>This will contain the box properly</p> -->
</section>

⋅ ⋅ ⋅

Фрагмент старого стиля:
Да, это работает, но япредпочитаю первый! 

.boxed {
  position: absolute;
  margin: 5pc auto; /* Modified to better fit in tiny snippet */
  --border-pc: 10%; /* You could even use a CSS variable to store the width if you want to be able to modify it easily. Or the colors. Or both. */
  /* I tried to indent it to better see the code: */
  background-image:
    linear-gradient(to top, /* Blue */
      rgba(0, 171, 238, 1) 0%,
      rgba(0, 171, 238, 1) var(--border-pc), /* example use of the CSS var */
      transparent var(--border-pc) ),
    linear-gradient(to right, /* Green */
      rgba(127, 203, 170, 1) 0%,
      rgba(127, 203, 170, 1) 10%,
      transparent 10% ),
    linear-gradient(to bottom, /* Orange */
      rgba(229, 99, 57, 1) 0%,
      rgba(229, 99, 57, 1) 10%, 
      transparent 10% ),
    linear-gradient(to left, /* Gray */
      rgba(186, 179, 173, 1) 0%,
      rgba(186, 179, 173, 1) 10%,
      transparent 10% );
  background-blend-mode: multiply; /* Added to mix the colors */
  height: 20pc;
  width: 20pc;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotate(45deg);
}
<section class="boxed">
  <!-- <p>This will contain the box properly</p> -->
</section>

(Обратите внимание, что если вы не используете background-blend-mode, вы можете выбрать, какие градиенты перекрывают другие, играя с их порядком!)

Надеюсь, это поможет.

0 голосов
/ 25 мая 2018

Единственный способ, как я нашел это, заключается в следующем, могут быть лучшие варианты: 

body{
    background-color: #594451;
    color: #fff;
}

.boxed1, .boxed2, .boxed3, .boxed4 {
    position: absolute;
    margin:auto;
    /* border: 3pc solid rgba(255, 255, 255 ,1); */
    box-sizing: border-box;
    height: 20pc;
    width: 20pc;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    
}

.boxed1 {
    border-top: solid rgba(229, 99, 57, 1) 3pc;
}

.boxed2 {
    border-right: solid rgba(186, 179, 173, 1) 3pc;
}

.boxed3 {
    border-bottom: solid rgba(0, 171, 238, 1) 3pc;
}

.boxed4 {
    border-left: solid rgba(127, 203, 170, 1) 3pc;
}
<h1>Welcome to Rahul's Lab</h1>
    <section class="boxed1">
        <!-- <p>This will contain the box properly</p> -->
    </section>
    <section class="boxed2">
        <!-- <p>This will contain the box properly</p> -->
    </section>
    <section class="boxed3">
        <!-- <p>This will contain the box properly</p> -->
    </section>
    <section class="boxed4">
        <!-- <p>This will contain the box properly</p> -->
    </section>

Надеюсь, это поможет.

0 голосов
/ 25 мая 2018

На самом деле невозможно перекрывать границы, так как они всегда встречаются под определенным углом в делении.Впрочем, создать эффект можно, создав отдельные блоки.Свойство mix-blend-mode допускает эффект наложения, предусмотренный вашим изображением.

Имейте в виду, что mix-blend-mode не поддерживает IE / Edge .

Вот как это можно сделать: 

body {
  margin: 30px
}

.block1 {
  background: rgba(127, 203, 170, 1);
}

.block2 {
  background: rgba(0, 171, 238, 1);
  transform: rotate(90deg);
  transform-origin: 20px 0;
  mix-blend-mode: color-burn;
}

.block3 {
  background: rgba(186, 179, 173, 1);
  transform: translateY(140px);
  mix-blend-mode: color-burn;
}

.block4 {
  background: rgba(229, 99, 57, 1);
  transform: translateY(30px) translateX(90px) rotate(90deg);
  mix-blend-mode: darken;
}

.block {
  height: 20px;
  width: 200px;
}
<div class="block1 block"></div>
<div class="block2 block"></div>
<div class="block3 block"></div>
<div class="block4 block"></div>
...