Bereiche Division mit rechts ein wenig gerundet Pfeil mit CSS Grenze

dort Hallo, ich diese Art Abschnitte Division haben müssen. Das Problem ist, den richtigen Pfeil zu machen, aber am wichtigsten ist es für mich, es mit Grenzen zu machen, so dass ich in der Lage bin, damit leicht zu manipulieren (z. B. Farbe ändern, Breite usw.) Gibt es eine gemeinsame Lösung? Es ist vorzuziehen, dies mit reinem CSS zu lösen, aber wenn Sie eine andere Lösung kennen, schlagen Sie bitte vor.

Quelle

2017-04-21 Aghasi Grigoryan

CSS unterstützt solche Formen nicht, soweit ich weiß. Vielleicht sehen Sie sich SVG an, wenn Sie Bilder vermeiden möchten. – kalsowerus

So ähnlich?

.menu-item::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: -11px; 
    background-color: red; 
    width: 20px; 
    height: 22px; 
    background-color: #cccccc; 
    z-index: 1; 
    transform: rotate(45deg) translateY(-50%); 
    transform-origin: top; 
    border-radius: 5px; 
    border-top: solid 2px rgb(236, 240, 241); 
    border-right: solid 2px rgb(236, 240, 241); 
}

https://jsfiddle.net/punb5k49/

können Sie ein Rechteck bilden und es 45 Grad machen drehen und Grenzradius haben diese Art von Wirkung zu haben. nicht so perfekt, aber es ist besser als nichts

EDIT *

, wenn Sie nicht bekommen, was ich meine, dieses Bild sehen und es mit meinem jsfiddle

Quelle

2017-04-21 08:06:50

Sie können prüfen, vergleichen hier die Lösung von Grenz Eigenschaft mit: -

<html> 
<head> 
<style> 
.bordr{ 
     height: 30px; 
    width: 30px; 
    background: transparent; 
    border-radius: 2px; 
    border-right: 1px solid red; 
    border-bottom: 1px solid red; 
    transform: rotate(-45deg); 
} 
</style> 
</head> 
<div class="bordr"> 
</div> 
</html>

https://jsfiddle.net/xakdeyea/

Quelle

2017-04-21 08:17:51 Rupal

Bereiche Division mit rechts ein wenig gerundet Pfeil mit CSS Grenze

Antwort

Verwandte Themen