原来border还可以这样用

最新推荐文章于 2024-08-20 14:34:45 发布

原创最新推荐文章于 2024-08-20 14:34:45 发布 · 929 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

HTML5/CSS3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS创建简单的不规则图形，如圆形、半圆、三角形等，并通过组合这些基本图形来构建更复杂的视觉效果。文章还提供了一些实用的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前以为css只能弄成box模型，就是方方块块，所以一遇到有简单不规则图形我就头疼，要么就是让设计师做好不规则图形作为背景图——但总会有浏览器尺寸适配问题；要么就是要用很麻烦的svg画不规则图形，而且svg会让前端代码变得很重。
但是有些简单不规则图形，也是能用css组合组合再组合得到的，挺好玩挺考验想象力的。
例如下面这些：

主要是用border的相关style来写的（这里复习一下常有的面试题：border-radius是css3的新增特性）

圆形

这里可以用border-radius属性，根据它可以定义圆角形状，于是我们只要把一个正方形的四个角都定义为圆角就可以了：

#demo1{
    height:50px;
    width:50px;
    border-radius:50%;
    line-height:50px;//顺便复习下怎么单行上下居中，就是让高与行高相等就可以了
}
//如此，你也知道半圆怎么弄的了
#demo1{
    height:50px;
    width:50px;
    border-radius:0 50% 50% 0;//定义四个角
}

三角形

在我们定义box模型的时候，如果box窗宽为零，只有边框的话，我们可以看到边框其实像下面这样组成的（可以想象下画框：四条长方形边总有三角形交叠部分，如果我们把交叠部分设置为透明，则…）

所以呢，所以示例中间的两个三角形我们可以这样实现：

#demo3{
    width:0;height:0;//长宽为0
    border-top:10px solid transparent;//让上下边无颜色透明，则把上下交叠处设置为透明
    border-bottom:10px solid transparent;
    border-right:10x solid blue;
}//这类三角形可以总结一个规律就是，你要角朝哪边，那就要设置除那边以外的其他border宽度形状，而且角两边的border为透明，角相对的边设置颜色。

#demo2{
    width:0;height:0;
    border-top:10px solid transparent;//让上边框透明，则把上交叠处设置为了透明
    border-right:10 solid blue;
}//这类直角三角形可以总结一个规律就是，你的直角在右下角，则设置右上边框宽度形状，而且上边框透明。

组合

既然我们知道了圆形、正方形、三角形用CSS怎么构建，那我们就可以组合成千千万万可爱的图形。

于是我们也可以实现：

<html>
<style>
    #demo{
    width:100px;height:100px;
    border-radius: 50%;
    }
    #demo1{
    position: relative;
    left:50px;
    width:0;
    height:0;
    border-right: 50px solid #fff;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    }
</style>
<body>
    <div id="demo">
        <div id="demo1"></div>
    </div>
</body>
</html>

猜猜它长啥样？

这里写图片描述