3

итог который мне нужен

Не понимаю, как можно сделать такую стрелку? Искала способы создания такого, но не нашла. В мыслях только вставлять картинкой весь блок, но это не является правильным, верно?

2 ответа 2

7

  .block {
    position: relative;
    width: 50px;
    height: 36px;
    z-index: 1;
    background: url(https://svgsilh.com/svg/558021-ffffff.svg) no-repeat #000;
    background-size: 20px;
    background-position: center 13px;
   }
  .block2{
    background: green;
    position: relative;
    width: 50px; 
    height: 17px;
  }
  .block2::after {
    content: ''; 
    position: absolute;
    right: calc(50% - 25px); 
    bottom: -45px;
    border: 25px solid transparent;
    border-top: 20px solid green;
   }
  .block::after {
    content: ''; 
    position: absolute;
    right: calc(50% - 25px); 
    bottom: -45px;
    border: 25px solid transparent;
    border-top: 20px solid black;
   }
<div class="block"></div>
<div class="block2"></div>

1
5

Немного дополню ответ от vantal:

Такие вещи должны быть унифицированы, т.е. есть некие общие контейнеры и есть индивидуальные признаки (например, иконка), потому что это все рано или поздно попадет в CMS.

.icon{
    width:50px;
    height:40px;
    background-color:#303030;
    background-repeat:no-repeat;
    background-size:20px;
    background-position:center 13px;
    position:relative;
}
    
.icon-pc{
    background-image:url(https://svgsilh.com/svg/558021-ffffff.svg);
}

.icon-inner{
    width:50px;
    height:17px;
    background:#13997C;
    position:relative;
    top:40px;
}

.icon::after{
    content:'';
    border:25px solid transparent;
    border-top:20px solid #13997C;
    position:absolute;
    left:0;
    bottom:-62px;
    z-index:1;
}

.icon::before{
    content:'';
    border:25px solid transparent;
    border-top:20px solid #303030;
    position:absolute;
    left:0;
    bottom:-45px;
    z-index:2;
}

.icon:hover{
    background-color:#13997C;
}

.icon:hover::before{
    border-top:20px solid #13997C;
}

.icon:hover::after{
    border-top:20px solid #303030;
}

.icon:hover .icon-inner{
    background:#303030;
}
<div class="icon icon-pc">
    <div class="icon-inner"></div>
</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.