Formen – CSS-Herausforderungen-CSS-Tutorial-php.cn

Formen – CSS-Herausforderungen

Patricia Arquette

Freigeben： 2024-11-06 18:57:02

Original

850 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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