利用css构造边框三角

头像
逆风微笑的代码狗
    74
    发布于
    广东
     

    绘制三角形

    image.png

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .triangle_top,
        .triangle_bottom,
        .triangle_left,
        .triangle_right {
            width: 0;
            height: 0;
            margin: 20px;
            position: relative;
            float: left;
        }

        .triangle_top {
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid #06AC68;
        }

        .triangle_right {
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 100px solid #06AC68;
        }

        .triangle_bottom {
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-top: 100px solid #06AC68;
        }

        .triangle_left {
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-right: 100px solid #06AC68;
        }
    </style>
</head>

<body>
    <!--三角 - 上-->
    <div class="triangle_top"></div>

    <!--三角 - 右-->
    <div class="triangle_right"></div>

    <!--三角 - 下-->
    <div class="triangle_bottom"></div>

    <!--三角 - 左-->
    <div class="triangle_left"></div>
</body>

</html>

    空心三角

    image.png
    代码 :

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .triangle_top,
        .triangle_right,
        .triangle_bottom,
        .triangle_left {
            width: 100px;
            height: 100px;
            position: relative;
            border: 1px solid #06AC68;
            background-color: #FFF;
            margin: 20px;
            position: relative;
            float: left;
            border-radius: 10px;
        }

        .triangle_top:before {
            content: "";
            border: 10px solid transparent;
            border-bottom-color: #CCC;
            position: absolute;
            left: 40px;
            top: -20px;
        }

        .triangle_top:after {
            content: "";
            border: 10px solid transparent;
            border-bottom-color: #FFF;
            position: absolute;
            left: 40px;
            top: -19px;
        }

        .triangle_right:before {
            content: "";
            border: 10px solid transparent;
            border-left-color: #CCC;
            position: absolute;
            left: 100px;
            top: 40px;
        }

        .triangle_right:after {
            content: "";
            border: 10px solid transparent;
            border-left-color: #FFF;
            position: absolute;
            left: 99px;
            top: 40px;
        }

        .triangle_bottom:before {
            content: "";
            border: 10px solid transparent;
            border-top-color: #CCC;
            position: absolute;
            left: 40px;
            top: 100px;
        }

        .triangle_bottom:after {
            content: "";
            border: 10px solid transparent;
            border-top-color: #FFF;
            position: absolute;
            left: 40px;
            top: 99px;
        }

        .triangle_left:before {
            content: "";
            border: 10px solid transparent;
            border-right-color: #CCC;
            position: absolute;
            left: -20px;
            top: 40px;
        }

        .triangle_left:after {
            content: "";
            border: 10px solid transparent;
            border-right-color: #FFF;
            position: absolute;
            left: -19px;
            top: 40px;
        }
    </style>
</head>

<body>
    <!-- 三角 - 上 -->
    <div class="triangle_top"></div>

    <!-- 三角 - 右 -->
    <div class="triangle_right"></div>

    <!-- 三角 - 下 -->
    <div class="triangle_bottom"></div>

    <!-- 三角 - 左 -->
    <div class="triangle_left"></div>
</body>

</html>

    实心三角

    image.png
    代码 :

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .triangle_top,
        .triangle_right,
        .triangle_bottom,
        .triangle_left {
            width: 100px;
            height: 100px;
            background: #06AC68;
            margin: 20px;
            position: relative;
            float: left;
            border-radius: 10px;
        }

        .triangle_top:before {
            content: "";
            width: 0px;
            height: 0px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #CCCCCC;
            position: absolute;
            top: -10px;
            left: 42px;
        }

        .triangle_right:before {
            content: "";
            width: 0px;
            height: 0px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #CCCCCC;
            position: absolute;
            top: 42px;
            right: -10px;
        }

        .triangle_bottom:before {
            content: "";
            width: 0px;
            height: 0px;
            border-top: 10px solid #CCCCCC;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            position: absolute;
            top: 100px;
            left: 42px;
        }

        .triangle_left:before {
            content: "";
            width: 0px;
            height: 0px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #CCCCCC;
            position: absolute;
            top: 40px;
            left: -10px;
        }
    </style>
</head>

<body>
    <!--三角 - 上-->
    <div class="triangle_top"></div>

    <!--三角 - 右-->
    <div class="triangle_right"></div>

    <!--三角 - 下-->
    <div class="triangle_bottom"></div>

    <!--三角 - 左-->
    <div class="triangle_left"></div>
</body>

</html>
    css技巧css
    本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
    avatar
    7 声望
    0 粉丝
    0 条评论
    得票最新
    推荐阅读
    CSS 绘制一只思否猫
    欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

    XboxYan赞 43阅读 3k评论 14

    封面图
    还在用 JS 做节流吗？CSS 也可以防止按钮重复点击
    举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库

    XboxYan赞 34阅读 2.4k评论 2

    封面图
    CSS 如何设置自动滚动定位的“安全”间距？
    欢迎关注我的公众号：前端侦探介绍两个和滚动定位相关的 CSS 属性：scroll-padding和 scroll-margin在平时开发中，经常会碰到需要快速定位的问题，比如常见的锚点定位 {代码...} 这样，在点击a标签时会自动定位到...

    XboxYan赞 31阅读 2.3k评论 2

    封面图
    CSS transition 小技巧！如何保留 hover 的状态？
    欢迎关注我的公众号：前端侦探通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了 {代码...} 这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是某某书院的首页...

    XboxYan赞 29阅读 3.6k评论 2

    封面图
    现代 CSS 之高阶图片渐隐消失术
    在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样： {代码...} {代码...} 但是，CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看，...

    chokcoco赞 25阅读 2.1k

    封面图
    除了 filter 还有什么置灰网站的方式？
    大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样：当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行 CSS，就能实现全站置灰的方式。像是这样，我...

    chokcoco赞 19阅读 1.7k评论 1

    封面图
    万能的CSS 渐变！单标签绘制一个足球场
    一眼望去，这里的形状只有圆形和矩形，在不借助其他标签的情况下（包括伪元素），其实很容易联想到渐变，一起看看如何绘制的吧，有非常多的渐变小技巧~

    XboxYan赞 18阅读 1.9k评论 8

    封面图
    avatar
    7 声望
    0 粉丝
    宣传栏