CSS中用border画三角形等图形

问题背景

最近在做一个官网项目的时候,UI小姐姐设计了一些特殊图形,例如三角形,虽然element-ui是带有相应模板的,但是设计的和模版的不一样,因此研究了一下。

三角形怎么画

三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3三角形画法</title>
    <style>
        .content{
            width: 0px;
            height: 0px;
            margin: 50px auto 0px;
            border-width: 150px;
            border-color: #666 #CC0066 #CC9966 #FFCC33;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

原来border每个边,形成了三角形。 之前一直很奇怪,为什么每次width 和 height 都是0px

我想原因已经不言而喻,当然我们应该试一下看看。

可以给加上padding:50px;中间的白色区域就是100px

再加上border-radius:50%;会变成这样

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3三角形画法</title>
    <style>
        .content{
            width: 0;
            height: 0;
            margin: 50px auto 0px;
            /*没有修改width 和 height 而是用了padding*/
            padding: 50px;
            border-width: 150px;
            border-color: #666 #CC0066 #CC9966 #FFCC33;
            border-style: solid;
            /*还可以把border-radius设置一个玩玩*/
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="content"></div>
</body>
</html>

我们看到了三角,却拿不到三角?

很简单,我们知道border-color 值对应的边分别为 top 、right、bottom、left ;

现在我们不想要那个,就把那个变透明。

当然我们要的三角通常不是这样的,现在,我们只要让border-color和border-width搭配,就可以变换各种三角。

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3三角形画法</title>
    <style>
        .outer{
            display: inline-block;
            margin: 50px;
            text-align: center;
            font-size: 24px;
            line-height: 40px;
        }
        .content{
            width: 0;
            height: 0;
            border-style: solid;
        }
        .content-1{
            /*不要上面的三角 同时左边和右边不要有颜色 就是可爱的正三角*/
            border-width: 0px 100px 100px 100px;
            border-color: transparent transparent #CC9966 transparent;
        }
        .content-2{
            /*左边的三角 就是右边的不要了 上下三角透明 一点毛病都没有*/
            border-width: 100px 0px 100px 100px;
            border-color: transparent transparent transparent #CC9966;
        }
        .content-3{
            border-width: 100px 100px 100px 100px;
            border-color: transparent #CC9966 #CC9966 transparent;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="content content-1"></div>
    <div>下三角</div>
    <div class="content content-2"></div>
    <div>左三角</div>
    <div class="content content-3"></div>
    <div>右直三角</div>
</div>
</body>
</html>

注意:如果是采用border-weight不变,使对应边的color透明的话,那么就是边框的尺寸会不变。

至于正三角、不规则三角等,只要知道它的原理,都是可以画出来的

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3三角形画法</title>
    <style>
        div{
            width: 0px;
            height: 0px;
            border-style: solid;
            margin: 30px auto 0px;
        }
        .content-1{
             /*梯形借助了padding*/
            padding: 10px 20px;
            border-width: 0px 50px 50px 50px;
            border-color: transparent transparent #CC9966 transparent;
        }
        .content-2{
            /*padding做梯形*/
            padding: 20px 10px;
            border-width: 50px 50px 50px 0px;
            border-color: transparent #CC9966 transparent transparent;
            /*喇叭效果*/
            -webkit-box-shadow: inset 15px 0 #666;
            -moz-box-shadow: inset 15px 0 #666;
            box-shadow: inset 15px 0 #666;
        }
        .content-3{
            width: 100px;
            height: 100px;
            background-color: #CC9966;
            border:none;
            /*平行四边行完全可以用旋转实现*/
            -webkit-transform: skew(-30deg);
            -moz-transform: skew(-30deg);
            -ms-transform: skew(-30deg);
            -o-transform: skew(-30deg);
            transform: skew(-30deg);
        }
    </style>
</head>
<body>
<body>
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="content-3"></div>
</body>
</body>
</html>
相关推荐
一只叫煤球的猫37 分钟前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode6 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu6 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript