在 CSS 中设置元素的圆角和三角形是常见的需求,因为这可以让我们的布局看起来更加美观和流畅。下面就来介绍一下如何使用 CSS 实现圆角和三角形效果。
一、圆角
border-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;
二、三角形
width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #000;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid #000;width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 100px solid #000;width: 0;height: 0;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;border-top: 50px solid #000;border-left: 50px solid transparent;border-right: 50px solid transparent;
以上是关于 CSS 圆角和三角形的使用方法,大家可以根据需要灵活应用,让页面布局更加美观。