ändern - Wie baue ich ein spezielles Polygon(eine Drachenform) nur mit HTML & CSS?




wordpress title tag ändern (2)

Mit CSS:

Verwenden:

  • nur HTML und CSS
  • 2 Elemente und 2 Pseudoelemente
  • Grenzradius und Transformationen für die inneren Linien
  • die Randtechnik für das untere Dreieck

.kite {
  position: relative;
  width: 200px; height: 200px;
  background: #f00;
  transform: rotate(45deg);
  margin: 0px auto;
  margin-top: 50px;
}
.kite:before, .kite:after {
  content: '';
  position: absolute;
}
.kite:before {
  top: 50%; left: -20.5%;
  width: 141%;
  margin-top:-1px;
  border-top: 2px solid #000;
  transform: rotate(45deg);
}
.kite:after {
  top: 0; left: 0;
  width: 198px; height: 198px;
  border-top-left-radius: 100%;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
}
.tail {
  position: absolute;
  top: 199px; left: 199px;
  width:60px; height:60px;
  overflow:hidden;
}
.tail:before{
  content:'';
  display:block;
  width:141%; height:100%;
  background:#000;
  transform-origin:0 100%;
  transform:rotate(-45deg);
}
<div class="kite"><span class="tail"></span>
</div>

Mit SVG

Ein weiterer Ansatz, den Sie in Betracht ziehen sollten, ist die Verwendung eines Inline-SVGs . Wie Sie scheinen, ein grafisches Element zu machen, kann SVG geeigneter semantisch sein und:

  • einfach skalierbar sein
  • kürzerer Code
  • bessere Kontrolle über die Formen und Kurven

Im folgenden Beispiel verwende ich Polylinienelemente , um das rote Quadrat, das untere schwarze Dreieck und die vertikale Linie zu bilden. Für die Kreislinie verwende ich ein Pfadelement mit einem quadratischen Bezierkurvenbefehl :

svg{display:block;width:400px;margin:0 auto;}
<svg viewbox="0 0 10 10">
  <polyline fill="red" points="5 0 9 4 5 8 1 4" />
  <polyline points="5 0 5.05 0.05 5.05 7.95 5 8 4.95 7.95 4.95 0.05" />
  <path d="M1.05 4.05 Q5 1 8.95 4.05" fill="none" stroke-width="0.1" stroke="#000" />
  <polyline points="5 8 6 9 4 9 " />
</svg>

Bonus

Dank an Harry dass er mich dazu gebracht hat, das noch einmal zu überdenken und mich dazu brachte, einen anderen CSS- Ansatz mit nur einem div zu finden:

.kite {
  position: relative;
  width: 200px; height: 200px;
  background: #f00;
  transform: rotate(45deg);
  margin: 0px auto;
  margin-top: 50px;
}
.kite:before, .kite:after {
  content: '';
  position: absolute;
}
.kite:before {
  top: 50px; left: -41px;
  width: 282px; height: 2px;
  margin-top: -1px;
  background: #000;
  transform-origin: 141px 52px;
  transform: rotate(45deg);
  background-clip: content-box;
  border-right: 50px solid #000;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}
.kite:after {
  top: 0; left: 0;
  width: 198px; height: 198px;
  border-top-left-radius: 100%;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
}
<div class="kite"></div>

https://code.i-harness.com

Ich arbeite an meinem neuen Projekt und brauche dazu einige unregelmäßige Strukturen. Einer von ihnen ist:

Was ich erreicht habe, ist:

.mainkite {
  width: 200px;
  height: 200px;
  background: #f00;
  transform: skew(180deg, 180deg) rotate(45deg);
  position: relative;
  margin: 0px auto;
  margin-top: 50px;
  overflow: hidden;
}
.midLine {
  border: solid 1px #000;
  transform: skew(180deg, 180deg) rotate(45deg);
  position: absolute;
  top: 99px;
  width: 140%;
  left: -41px;
}
<div class="mainkite">
  <div class="midLine"></div>
</div>

jsfiddle

Wie kann ich den Rest der Form bekommen, die ich begehre?


Die Antwort von ist wunderbar und ich würde SVG für komplexe Formen aus den gleichen Gründen empfehlen, die in seiner Antwort angegeben sind. Diese Form ist jedoch relativ einfach mit CSS zu erstellen und unten ist eine andere Variante, um dies mit nur einem Element zu erstellen.

Der schwarze Schwanzteil ist ein Pseudoelement, während der rote Drachen sein box-shadow . Die Linie in der Mitte wird mit einem linear-gradient auf dem übergeordneten Element erstellt, und die gebogene Zeichenfolge ist das zweite Pseudo.

Ich habe Viewport-Einheiten für alle Teile verwendet, um die Ausgabe reaktionsfähig zu machen. Dies liegt daran, dass die Box-Schatten keine prozentualen Werte annehmen können und nicht reagieren können, es sei denn, die Ansichtsfenster-Einheiten werden verwendet.

.kite {
  position: relative;
  height: 25vw;
  width: 25vw;
  background: linear-gradient(to right, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), transparent calc(50% + 1px));
  overflow: hidden;
}
.kite:before {
  position: absolute;
  content: '';
  top: calc(84.5% + 1px);  /* (15/25 * 1.414 is approximately 84.5% + 1px for correction */
  left: 50%;
  height: 15vw;
  width: 15vw;
  background: black;
  transform-origin: left top;
  transform: rotate(45deg);
  box-shadow: -15vw -15vw 0px red; /* the x and y are same as height and width */
  z-index: -1;
}
.kite:after {
  position: absolute;
  content: '';
  top: calc(0% - 2px);
  left: calc(50% + 1px);
  width: calc(15vw - 2px);
  height: calc(15vw - 1px);
  border-top-left-radius: 100%;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
  transform-origin: left top;
  transform: rotate(45deg);
}
<div class="kite"></div>





css-shapes