<div></div>
    width:200px;
    height:100px;
    position: relative;
    margin:50px auto;
    border:1px solid black;
div:before{
    content:"";
    border:10px solid transparent;
    border-bottom-color:black;
    
    left:20px;
    top:0;
    margin-top:-20px;
div:after{
    content:"";
    border:10px solid transparent;
    border-bottom-color:white;
    position: absolute;
    top:0;
    left:20px;
    margin-top:-19px;
                    HTML：&lt;span&gt;&lt;/span&gt;CSS：span:after {    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-top: 5px solid #555555;    content: "";    position: re...
写了几个小特效的代码，发现对于用纯css实现非常规的图形这个小技能，还是有点云里雾里的，所以以三角形为例，特此记录一下。
实现方式目前为止，我知道的有6种，欢迎补充。
HTML代码
    <div class="triangle1"></div>
    <div class="triangle2">▼</div>
    <div class="triangle3"></div>
				
在一些面试经验中，经常能看到有关css的题目都会有一道如何使用css绘制三角形，而常见的回答通常也只有使用border进行绘制一种方法。
而css发展到今天，其实有很多有意思的仅仅使用css就能绘制出来的三角形的方式，本文将展示6中使用css绘制三角形的方式，而且它们都很好掌握。
当然本文是抛砖引玉，css日新月异，可能还有一些有意思的方法本文遗漏了，欢迎大家在留言区补充。
				
:focus-within是一个CSS伪类，用于选择器匹配其内部有焦点的元素的父元素。当父元素的子元素获得焦点时，可以使用:focus-within来样式化父元素本身。\[2\]在引用\[1\]中的示例中，当.field类的div的后代元素input被focus时，div的背景颜色会变为#f0f0f0，而伪类::after中的*将不会显示。\[1\]而在引用\[2\]中的示例中，当.my-element类的div的子元素获得焦点时，div本身会出现一个3px的红色边框。\[2\]\[3\]所以:focus-within可以用来样式化父元素，当其内部的子元素获得焦点时。
#### 引用[.reference_title]
-  *1* [CSS之:focus-within自身或某个后代focus的伪类](https://blog.csdn.net/joyce_lcy/article/details/104481277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
-  *2* *3* [CSS里：focus-within 的作用和用法](https://blog.csdn.net/i042416/article/details/109618129)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]