本文主要是介绍实现一个三角形、扇形、宽高自适应的正方形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
2. 实现一个扇形 · 超级学习资料 · 看云
1、实现一个三角形
用CSS绘制一个三角形-CSDN博客
2、实现一个扇形
在实现三角形的逻辑基础上，加上 border-radius 即可。
<head><style>.sector {width: 0;height: 0;border-top: 60px solid red;border-right: 60px solid yellow;border-bottom: 60px solid blue;border-left: 60px solid green;border-radius: 60px;} </style>
</head>
<body><div class="sector"></div>
</body>
<head><style>.sector {width: 0;height: 0;border-top: 60px solid transparent;border-right: 60px solid transparent;border-bottom: 60px solid transparent;border-left: 60px solid green;border-radius: 60px;} </style>
</head>
<body><div class="sector"></div>
</body>3、实现一个宽高自适应的正方形
① 利用vw来实现
<head><style>.square {width: 10%;height: 10vw;background: tomato;} </style>
</head>
<body><div class="square"></div>
</body>② 利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现
.square {width: 20%;height: 0;padding-top: 20%;background: tomato;} ③ 利用子元素的 margin-top 的值来实现
.square {width: 30%;overflow: hidden;background: tomato;}.square::after {content: '';display: block;margin-top: 100%;} 这篇关于实现一个三角形、扇形、宽高自适应的正方形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
