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 that you have read and understand our privacy policy and code of conduct.

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