0

Мне нужно сверстать стрелку с закругленными углами, я реализовал её через бордер, но бордер-радиус не применяется где нужно. введите сюда описание изображения

У меня получается только такая, не все углы могу скруглить...

.prev {
  left: 0;
  display: block;
  content: "";
  width: 32px;
  height: 32px;
  right: 0;
  border: 8px solid #4a275c;
  border-radius: 5px;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<div class="prev"></div>

1
  • У меня такое получалось двумя линиями в :before и :after, долго ковырялся с аналогичной проблемой, но решение только такое 16 сен 2016 в 6:46

3 ответа 3

2

Например можно так:

.prev {
  position: relative;
}

.prev:before,
.prev:after {
    content: '';
    display: block;
    height: 8px;
    width: 32px;
    background: #4a275c;
    border-radius: 5px;
    
}

.prev:before {
    transform-origin: 50% 100%;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.prev:after {
    transform-origin: 0% 100%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
<div class="prev"></div>

Если в обратную сторону:

.prev {
  position: relative;
}

.prev:before,
.prev:after {
    content: '';
    display: block;
    height: 8px;
    width: 32px;
    background: #4a275c;
    border-radius: 5px;
    
}

.prev:before {
    transform-origin: 50% 100%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.prev:after {
    transform-origin: 100% 100%;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
<div class="prev"></div>

3
  • А не подскажите, как в обратную сторону такую же сделать? что-то не получается по аналогии 16 сен 2016 в 7:04
  • @Александр, добавила и для обратной стороны!
    – SVE
    16 сен 2016 в 7:07
  • Только я сделал бы для обратной по такой логике: .arrow {...} + .arrow.next { transform: rotate(180deg) } 16 сен 2016 в 7:14
1

.prev {
  width: 32px;
  height: 32px;
  position: relative;  
}
.prev:before,
.prev:after{
  content: '';
  position: absolute; left: 15px;
  width: 8px;
  height: 32px;
  background: #4a275c;
  border-radius: 5px;
}
.prev:before{
  top: 0;  
  transform: rotate(45deg);
}
.prev:after{
  top: 18px; 
  transform: rotate(-45deg);
}
<div class="prev"></div>

0

А а если попробовать через after и before создать две линии скруглить их полностью и потом трансформацией развернуть.

Ваш ответ

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

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