Heim > Artikel > Web-Frontend > Formen – CSS-Herausforderungen

Formen – CSS-Herausforderungen

Patricia ArquetteOriginal: 2024-11-06 18:57:02771Durchsuche

Shapes - CSS challenges

Sie finden den gesamten Code in diesem Beitrag im Repo Github.

Sie können das Bild hier in CodeSandbox überprüfen.

Zeichnen Sie alle Arten von Formen über CSS

Wie zeichnet man in CSS quadratische, trapezförmige, dreieckige, Ano-Dreiecke, Sektoren, Kreise, Halbkreise, feste Breiten-Höhen-Verhältnisse und 0,5-Pixel-Linien?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Shapes</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="square"></div>

    <div class="trapezoidal"></div>

    <div class="triangle"></div>

    <div class="ano-triangle"></div>

    <div class="sector"></div>

    <div class="circle"></div>

    <div class="half-circle"></div>

    <div class="fixed-width-height-ratio"></div>

    <div class="half-one-px-line">0.5px line</div>
  </body>
</html>

.square {
  width: 100px;
  height: 100px;
  border-top: 50px solid red;
  border-bottom: 50px solid blue;
  border-right: 50px solid green;
  border-left: 50px solid orange;
}

.trapezoidal {
  width: 100px;
  height: 100px;
  border: 50px solid transparent;
  border-bottom-color: tomato;
}

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: tomato;
}

.sector {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: tomato;
  border-radius: 50%;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: tomato;
}

.half-circle {
  width: 100px;
  height: 50px;
  background-color: tomato;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.fixed-width-height-ratio {
  padding-top: 56.25%;
  background-color: blue;
  width: 100%;
}

.half-one-px-line {
  background-color: aqua;
  border-bottom: 1px solid black;
  transform: scaleY(0.5) scaleX(0.5);
  transform-origin: 0 0;
}

Das obige ist der detaillierte Inhalt vonFormen – CSS-Herausforderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css this github

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Warum gibt myDiv.style.display „Leer“ zurück, wenn es in einem Master-Stylesheet festgelegt wird?Nächster Artikel：Warum gibt myDiv.style.display „Leer“ zurück, wenn es in einem Master-Stylesheet festgelegt wird?

In Verbindung stehende Artikel

Mehr sehen