网络知识
css圆角三角
2026-04-02 15:48  点击:0

在 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 圆角和三角形的使用方法,大家可以根据需要灵活应用,让页面布局更加美观。