CSS画圆半圆扇形三角梯形

原创于 2022-08-04 00:35:10 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

CSS 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了如何使用CSS创建半圆形、扇形、三角形和梯形元素，通过代码实例展示了如何运用HTML和CSS来设计这些几何图形，适合前端开发者学习基础布局技巧。

半圆

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

div {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

.half-circle {
    height: 50px;
    border-radius: 50px 50px 0 0;
}

扇形

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

div {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

.sector {
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
    transform: rotate(45deg);
}

三角

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

div {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

.triangle {
	width: 0px;
    height: 0px;
    background: none;
    border: 50px solid red;
    border-color: transparent transparent red transparent;
}

梯形

<div class="ladder"></div>

div {
    width: 100px;
    height: 100px;
    margin: 50px;
    background: red;
}

.ladder {
    width: 50px;
    height: 0;
    background: none;
    border: 50px solid red;
    border-color: red transparent transparent transparent;
}