Как создать стрелку вниз с помощью CSS? - PullRequest
Новая
       50

Как создать стрелку вниз с помощью CSS?

0 голосов
/ 20 февраля 2019

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

Мой код: 

.pentagon {
    position: relative;
    width: 350px;
    top:20rem;
    left: 20rem;
    border-width: 80px 0 100px 0;
    border-style: solid;
    border-color: #01ff70 transparent;
}
.pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    left: -7.5rem;
    border-width: 100px 300px 300px;
    border-style: solid;
    border-color: transparent transparent #01ff70;
    transform: rotate(180deg);
}

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Я бы построил это с несколькими градиентами для создания каждой линии: 

.arrow {
  width:200px;
  height:200px;
  background:

    linear-gradient(blue,blue)  top center/ 100px 3px,
    
    linear-gradient(blue,blue)  calc(50% - 50px) 0/3px 50%,
    linear-gradient(blue,blue)  calc(50% + 50px) 0/3px 50%,
    
    linear-gradient(blue,blue)  0 50%/51px 3px,
    linear-gradient(blue,blue)  100% 50%/51px 3px,
    
    linear-gradient(to bottom right,
      transparent calc(50% - 2px),blue calc(50% - 2px),
      calc(50% + 2px),transparent calc(50% + 2px)) 100% 100%/50% 50%,
    linear-gradient(to bottom left,
      transparent calc(50% - 2px),blue calc(50% - 2px),
      calc(50% + 2px),transparent calc(50% + 2px)) 0 100%/50% 50%;
    
  background-repeat:no-repeat;
  text-align:center;
  line-height:220px;
}
<div class="arrow">
  text inside
</div>

И с некоторой переменной CSS для управления различными значениями: 

.arrow {
  --c:blue; /*main color*/
  --t:2px; /*thickness*/
  --d: 100px; /*top length*/
  --p:50%; /*percentage of top*/
  
  --g:linear-gradient(var(--c),var(--c));
  width:200px;
  height:200px;
  background:
    /*1*/
    var(--g) top center/ var(--d) var(--t),
    /*2*/
    var(--g)  calc(50% - var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
    var(--g)  calc(50% + var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
    /*3*/
    var(--g)  left  0 top var(--p)/calc(50% - var(--d)/2) var(--t),
    var(--g)  right 0 top var(--p)/calc(50% - var(--d)/2) var(--t),
    /*4*/
    linear-gradient(to bottom right,
      transparent calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
      calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 100% 100%/50% calc(100% - var(--p)),
    linear-gradient(to bottom left,
      transparent calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
      calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 0 100%/50% calc(100% - var(--p));
    
  background-repeat:no-repeat;
  display:inline-block;  
  text-align:center;
  line-height:220px;
}
<div class="arrow">
  text inside 
</div>
<div class="arrow" style="--c:red;--t:5px;--d:40px;--p:40%">
 text inside
</div>
<div class="arrow" style="--c:green;--t:3px;--d:70px;--p:60%">
 text inside
</div>
  1. линия, расположенная на top center с шириной, равной --d, и высотой, равной --t
  2. Две вертикальные линии с шириной, равной --t и высотой, равной --p + вдвое меньше толщины, чтобы правильно связать их с нижней частью.Мы помещаем первую строку сверху 0, а из центра удаляем половину --d, чтобы она начиналась слева от верхней строки.Та же логика с другой линией справа.
  3. Две горизонтальные линии шириной, равной половине ширины, оставленной верхней строкой (100% - var(--d))/2, и высотой, равной --t.Их размещение легко найти.левый в 0 слева и --p сверху.Та же логика для правильной.
  4. Две диагональные линии - это два градиента, которые будут занимать половину ширины и 100% - var(--p).Здесь мы играем с окраской, чтобы окрасить только диганональную часть, и оставляем прозрачным.

Если вы хотите больше, мы можем добавить окраску внутри стрелки: 

.arrow {
  --c:blue; /*main color*/
  --b:red; /*background color*/
  --t:2px; /*thickness*/
  --d: 100px; /*top length*/
  --p:50%; /*percentage of top*/
  
  --g:linear-gradient(var(--c),var(--c));
  width:200px;
  height:200px;
  background:
    /*1*/
    var(--g) top center/ var(--d) var(--t),
    /*2*/
    var(--g)  calc(50% - var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
    var(--g)  calc(50% + var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
    /*3*/
    var(--g)  left  0 top var(--p)/calc(50% - var(--d)/2) var(--t),
    var(--g)  right 0 top var(--p)/calc(50% - var(--d)/2) var(--t),
    /*4*/
    linear-gradient(to bottom right,
      var(--b) calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
      calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 100% 100%/50% calc(100% - var(--p)),
    linear-gradient(to bottom left,
      var(--b) calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
      calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 0 100%/50% calc(100% - var(--p)),
     /*5*/
     linear-gradient(var(--b),var(--b)) center top/var(--d) var(--p);
  background-repeat:no-repeat;
  display:inline-block;  
  text-align:center;
  line-height:220px;
}
<div class="arrow">
  text inside
</div>
<div class="arrow" style="--c:red;--b:yellow;--t:5px;--d:40px;--p:40%">
  text inside
</div>
<div class="arrow" style="--c:green;--b:pink;--t:3px;--d:70px;--p:60%">
  text inside
</div>
0 голосов
/ 20 февраля 2019

Вы можете использовать css clip-path на div. 

.arrow { 
    -webkit-clip-path: polygon(0 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(0 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

Для этого есть удобный инструмент на https://bennettfeely.com/clippy/

...