CSS画三角形

最新推荐文章于 2023-09-05 16:23:33 发布

viaChanging

最新推荐文章于 2023-09-05 16:23:33 发布

阅读量455

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/viaChanging/article/details/78228531

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

RT，在实际生产开发中，经常会遇到CSS画三角形需求，熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。
CSS画三角形，包括两种需求：

coding

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        #demo{
            width: 100px;
            height: 100px;
            border:2px solid #000;
            position: relative;

        }

        /* 实心三角形 */
        #demo::before{
            position: absolute;
            content: "";
            display: block;
            right: -10px;
            top: 20px;
            border-style: solid;
            border-width: 10px 0px 10px 10px;
            border-color: transparent transparent  transparent  black;
        }

        /* 空心三角形 */
        #demo::after{
            position: absolute;
            content: "";
            display: block;
            right: -7.2px;/*1.414倍宽度 */
            top: 20px;
            border-style: solid;
            border-width: 10px 0px 10px 10px;
            border-color: transparent transparent  transparent  white;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

效果图

viaChanging

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS画三角形

RT，在实际生产开发中，经常会遇到CSS画三角形需求，熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。 CSS画三角形，包括两种需求：实心三角形空心三角形三角形入门知识有谁能详细讲一下css如何画出一个三角形？怎么想都想不懂？CSS实现空心三角指示箭头看题coding…..<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=
复制链接

扫一扫