阅读 7129

用 css 画三角形、梯形、扇形、箭头和椭圆几种基本形状

1. 画三角形

利用元素的 border 绘制三角形,先来看一下宽高均为 0,border 有宽度的效果是啥样的:

<style>
.triangle {
            width: 0;
            height: 0;
            border-top: 100px solid #f00;
            border-right: 100px solid #0f0;
            border-bottom: 100px solid #00f;
            border-left: 100px solid #ff0;
        }
</style>

<div class="triangle"></div>
复制代码

然后我们可以通过给任意三边的颜色设置为 transparent 即可分别实现任一方向的三角形。

通过设置某条边的宽度比其它边宽,来调整三角形的高度。

    <style>
        .triangle {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 200px solid #0ff;
        }
    </style>
复制代码

通过设置某条边的宽度比其它边窄,来调整三角形的宽度。

    <style>
        .triangle {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 200px solid #0ff;
        }
    </style>
复制代码

2. 画梯形

梯形也是基于 border 来绘制的,只不过绘制梯形时,宽高和border尺寸相同。

<style>
        .trapezoid {
            width: 50px;
            height: 50px;
            background: #ff0;
            border-top: 50px solid #f00;
            border-bottom: 50px solid #00f;
            border-left: 50px solid #0f0;
            border-right: 50px solid #0ff;
        }
    <div class="trapezoid"></div>
</style>
复制代码

然后与三角形同理,把任意三边颜色设置为 transparent即可得到某一朝向的梯形。

3. 画扇形

任意角度的有点复杂,暂时先只实现90度的吧。

原理:左上角是圆角,其余三个角都是直角:左上角的值为宽和高一样的值,其他三个角的值不变(等于0)。 border-radius四个值的顺序是:左上角,右上角,右下角,左下角。

    <style>
        .sector1 {
            border-radius:100px 0 0;
            width: 100px;
            height: 100px;
            background: #00f;
        }
        <div class="sector1"></div>
    </style>
复制代码

原理:和三角形的实现有些类似。

    <style>
        .sector2 {
            border: 100px solid transparent;
            width: 0;
            border-radius: 100px;
            border-top-color: #f00;
        }
        <div class="sector2"></div>
    </style>
复制代码

4. 画箭头

利用三角绘制箭头,只需要再绘制一个和此三角大小相同,方向相同的三角,颜色和背景颜色一样,覆盖在此三角上面,通过少量的位移形成箭头。

<style>
        .arrow{
            width: 0;
            height: 0;
            border: 50px solid;
            border-color: transparent #0f0 transparent transparent;
            position: relative;
        }
        .arrow::after{
            content: '';
            position: absolute;
            right: -55px;
            top: -50px;
            border: 50px solid;
            border-color: transparent #fff transparent transparent;
        }
        
        <div class="arrow"></div>
</style>
复制代码

5. 椭圆

椭圆依旧依赖 border-radius 属性,很多人应该都没注意过,border-radius 其实可以设置水平半径和垂直半径两个值 ,参考MDN - border-radius,具体用法为 border-radius: 水平半径 / 垂直半径;.

<style>
        .oval {
            width: 100px;
            height: 50px;
            background: #ff0;
            border-radius: 50px / 25px;
        }
</style>
<div class="oval"></div>
复制代码

6. 总结

文章分类
前端
文章标签