Form, die einem Kompasszeiger oder einem inneren Teil eines Safari-Logos ähnelt
Ich versuche, die folgende Form nur mit CSS zu erstellen. Ich weiß, dass es viel einfacher wäre, diese Form mit einem Bild oder einer SVG-Datei zu erzielen, aber ich versuche, sie mit CSS für einen Proof-of-Concept zu erreichen.
Der folgende Code ist der Code, den ich bisher ausprobiert habe. Mit @ wird eine Rautenform erstelltransform: rotate(45deg) aber die Diagonalen sind gleich lang, während die Form, die ich brauche, eine sehr lange Diagonale und eine andere sehr kurze hat.
.separator{
background: #555;
top: 40px;
padding-top: 0px;
margin: 0px 40px;
height: 100px;
width: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
Ist es möglich, die benötigte Form mit CSS zu erstellen?
Hinweis A ähnliche Frage wurde früher gefragt und als "zu breit" geschlossen / gelöscht, da es keinen Codierungsversuch zeigte. Eine neue Frage posten und selbst beantworten basierend aufdiese Metadiskussion. Zögern Sie nicht, alternative Lösungen zu finden (oder) die Frage zu bearbeiten, um sie für zukünftige Leser nützlicher zu machen.