I need to create an arrow with rounded corners, I implemented it through a border, but the border radius does not apply where necessary. enter image description here

I only get this, not all corners can round off ...

.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>

  • I did this with two lines in :before and :after , poking around for a long time with a similar problem, but the solution is just that - Artem Gorlachev

3 answers 3

For example, you can:

 .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>

If in the opposite direction:

 .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>

  • And do not tell me how to do the same in the opposite direction? something does not work by analogy - Alexander
  • @ Alexander, added for the reverse side! - HamSter
  • Thank you very much, not the first time helping out. - Alexander
  • Only I would do the opposite for this logic: .arrow {...} + .arrow.next { transform: rotate(180deg) } - Artem Gorlachev

 .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>

    And if you try after after and before to create two lines to round them completely and then expand them by transformation.