CSS для рисования различных фигур

иллюстрировать

CSS может быть нарисована с использованием любого количества форм, таких как треугольная, трапециевидная, круговая, эллиптическая, и тому подобное может не только рисовать прямоугольник. Давайте посмотрим, как достичь этих форм.

основная форма

треугольник

.triangle {
    width: 0;
    height: 0;
    border: 50px solid blue;
    /* 通过改变边框颜色，可以改变三角形的方向 */
    border-color: blue transparent transparent transparent;
}

Посмотреть пример

трапеция

.trapzoid {
    width: 40px;
    height: 100px;
    border: 50px solid blue;
    border-color: transparent transparent blue transparent;
}

Посмотреть пример

круглый

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

Посмотреть пример

сфера

.sphere {
	height: 200px;
    width: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 70px 70px, #5cabff, #000);
}

Посмотреть пример

овал

.ellipse {
    width: 200px;
    height: 100px;
    border-radius: 50%;
    background: blue;
}

Посмотреть пример

полукруг

.semicircle {
    width: 50px;
    height: 100px;
    /*  "/"前四个值表示圆角的水平半径，后四个值表示圆角的垂直半径*/
    border-radius: 200% 0 0 200% / 100% 0 0 100%;

    /* 效果和用%一样 */
    /* border-radius: 50px 0 0 50px; */
    background: blue;
}

Посмотреть пример

алмаз

.rhombus {
    width: 200px;
    height: 200px;
    transform: rotateZ(45deg) skew(30deg, 30deg);
    background: blue;
}

Посмотреть пример

Объединение фигур

в форме сердца

Форма сердца получается путем объединения двух кругов и прямоугольника.

.heart {
    width: 100px;
    height: 100px;
    transform: rotateZ(45deg);
    background: red;
}

.heart::after,
.heart::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    background: red;
    position: absolute;
    top: -50%;
    left: 0;
}

.heart::before {
    top: 0;
    left: -50%;
}

Посмотреть пример

сектор

Форма веера получается путем объединения круга и прямоугольника, а покрытие части круга прямоугольником образует форму веера.

.sector {
    width: 142px;
    height: 142px;
    background: #fff;
    border-radius: 50%;
    background-image: linear-gradient(to right, transparent 50%, #655 0);
}

.sector::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
	width: 100%;
    background-color: inherit;
    transform-origin: left;
	/*调整角度，改变扇形大小*/
    transform: rotate(230deg);
}

Посмотреть пример

пятиугольник

Пятиугольник представляет собой комбинацию треугольника и трапеции.

.pentagonal {
    width: 100px;
    position: relative;
    border-width: 105px 50px 0;
    border-style: solid;
    border-color: blue transparent;
}

.pentagonal:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -185px;
    left: -50px;
    border-width: 0px 100px 80px;
    border-style: solid;
    border-color: transparent transparent blue;
}

Посмотреть пример

шестиугольник

Шестиугольник образуется путем соединения двух треугольников и прямоугольника.

.hexagon {
    width: 200px;
    height: 100px;
    background-color: blue;
    position: relative;
}

.hexagon:before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 60px solid blue;
}

.hexagon:after {
    content: "";
    left: 0;
    width: 0;
    height: 0;
    bottom: -60px;
    position: absolute;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 60px solid blue;
}

Посмотреть пример

кубовидный

Кубоид получается путем объединения шести прямоугольников.

.cuboid {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
}

.cuboid div {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: .4s;
}

.cuboid .front {
    transform: rotateY(0deg) translateZ(100px);
    background: #a3daff;
}

.cuboid .back {
    transform: translateZ(-100px) rotateY(180deg);
    background: #a3daff;
}

.cuboid .left {
    transform: rotateY(-90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .right {
    transform: rotateY(90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .top {
    transform: rotateX(90deg) translateZ(100px);
	background: #0080ff;
}

.cuboid .bottom {
    transform: rotateX(-90deg) translateZ(100px);
	background: #0080ff;
}

<div class="cuboid">
    <!--前面 -->
    <div class="front"></div>
    <!--后面 -->
    <div class="back"></div>
    <!--左面 -->
    <div class="left"></div>
    <!--右面 -->
    <div class="right"></div>
    <!--上面 -->
    <div class="top"></div>
    <!--下面 -->
    <div class="bottom"></div>
</div> 

Посмотреть пример

цилиндр

Цилиндр получается путем объединения эллипса и прямоугольника со скругленными углами.

.cylinder {
    position: relative;
    transform: rotateX(70deg);
}

.ellipse {
    width: 100px;
    height: 100px; 
    background: deepskyblue;
    border-radius: 50px;
}

.rectangle {
    width: 100px;
    height: 400px;
    position: absolute;
    opacity: 0.6;
    background: deepskyblue;
    top: 0;
    left: 0; 
    border-radius: 50px;
	z-index: -1;
}

<div class="cylinder">
    <div class="ellipse"></div>
    <div class="rectangle"></div>
</div>

Посмотреть пример

Это будет больше похоже на градиент, если его использовать.

background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);

Посмотреть пример

Пирамида

Пирамида получается при соединении четырех треугольников и прямоугольника.

.pyramid {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
} 
.pyramid div {
    position: absolute;
    top: -100px;
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom-width: 200px;
    opacity: 0.8;
}

.pyramid .front {
    transform: translateZ(100px) rotateX(30deg);
    border-bottom-color: #a3daff;
    transform-origin: 0 100%;
}

.pyramid .back {
    transform: translateZ(-100px) rotateX(-30deg);
    border-bottom-color: #1ec0ff;
    transform-origin: 0 100%;
}

.pyramid .left {
    transform: translateX(-100px) rotateZ(30deg) rotateY(90deg);
    border-bottom-color: #0080ff;
    transform-origin: 50% 100%;
}

.pyramid .right {
    transform: translateX(100px) rotateZ(-30deg) rotateY(90deg);
    border-bottom-color: #03a6ff;
    transform-origin: 50% 100%;
}

.pyramid .bottom {
    transform: translateX(-100px) rotateZ(90deg) rotateY(90deg);
    background: cyan;
    width: 200px;
    height: 200px;
    border: 0;
    top: 0;
    transform-origin: 50% 100%;
}

<div class="pyramid">
    <!--前面 -->
    <div class="front"></div>
    <!--后面 -->
    <div class="back"></div>
    <!--左面 -->
    <div class="left"></div>
    <!--右面 -->
    <div class="right"></div>

    <!--下面 -->
    <div class="bottom"></div>
</div>

Посмотреть пример

Суммировать

Различные фигуры, реализованные в тексте, могут быть усложнены вами, но вы также можете использоватьclip-pathЭто одно свойство рисует различные формы.

Вещи, которые может рисовать CSS, это не только эти, но есть еще много-много других, которые не упомянуты в тексте, и даже фигуры, которые были реализованы в тексте, имеют не только один способ реализации, и заинтересованные друзья могут продолжайте исследовать.

наконец

Происходит сочетание различных форм, образов магии образов.

Мы также можем анимировать фигуры в магическом круге, чтобы сделать магический круг более интересным.

Посмотреть пример