CSS画三角形

来源：互联网发布：鼻行动物存在吗知乎编辑：程序博客网时间：2024/06/16 16:34

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

实心三角形
空心三角形
三角形入门知识
有谁能详细讲一下css如何画出一个三角形？怎么想都想不懂？
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>

效果图

阅读全文

0 0

CSS画三角形

三角形入门知识

看题

coding