Чистые CSS Arrow Divs в CSS Grid - PullRequest
Новая
       9

Чистые CSS Arrow Divs в CSS Grid

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

Есть ли способ создать что-то подобное в CSS, но более гибкий (например, для использования в ячейке CSS Grid)? - оригинальный пост здесь . 

#triangles {
  margin: 3em;
  width: 0; /* set dimensions of DIV to 0 so borders collapse and touch */
  height: 0;
  border-color: red blue green yellow; /* top, right, bottom, and left border */
  border-style: solid;
  border-width: 50px; /* width of each border */
}
<div id="triangles"></div>

Ответы [ 2 ]

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

В качестве альтернативы, вы можете использовать SVG для этого.

Быстрый jsfiddle . 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: #F9F871;
}

.svg-box {
  width: 30vw;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.top {
  fill: #845EC2;
}

.left {
  fill: #D65DB1;
}

.bottom {
  fill: #FF9671;
}

.right {
  fill: #FFC75F;
}
<div class="container">
  <div class="svg-box">
    <svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon class="top" points="0,0 100,0 50,50"/>
      <polygon class="left" points="0,0 50,50 0,100"/>
      <polygon class="bottom" points="0,100 50,50 100,100"/>
      <polygon class="right" points="100,0 100,100 50,50"/>
    </svg>
  </div>
</div>
0 голосов
/ 15 мая 2018

Вы можете использовать linear-gradient, чтобы легко создавать эти треугольники. Вы можете рассматривать отдельные классы (как показано ниже) или использовать их в одном элементе как несколько фонов. 

#triangles {
  width: 100px;
  height: 100px;
  display: inline-block;
}

#triangles div {
  height: 100%;
}

.tr-left {
  background: 
    linear-gradient(to top left, transparent 50%, red 0) 0 100%/50% 50% no-repeat, 
    linear-gradient(to bottom left, transparent 50%, red 0) 0 0/50% 50% no-repeat;
}

.tr-right {
  background:
    linear-gradient(to top right, transparent 50%, yellow 0) 100% 100%/50% 50% no-repeat,
    linear-gradient(to bottom right, transparent 50%, yellow 0) 100% 0/50% 50% no-repeat;
}

.tr-top {
  background:
    linear-gradient(to top right, transparent 50%, green 0) 0 0/50% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, green 0) 100% 0/50% 50% no-repeat;
}

.tr-bottom {
  background:
    linear-gradient(to bottom right, transparent 50%, blue 0) 0 100%/50% 50% no-repeat,
    linear-gradient(to bottom left, transparent 50%, blue 0) 100% 100%/50% 50% no-repeat;
}
<div id="triangles" class="tr-left"></div>
<div id="triangles" class="tr-left">
  <div class="tr-right"></div>
</div>
<div id="triangles" class="tr-top">
  <div class="tr-right"></div>
</div>

<div id="triangles" class="tr-left">
  <div class="tr-bottom">
    <div class="tr-top">
      <div class="tr-right"></div>
    </div>
  </div>
</div>
...