css实现圆角三角形例子(无图片)
2024-08-13 12:50:07 215人阅读
css实现圆角三角形例子(无图片)
以前我们做圆角时都会要用到图片来实现，今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦，下面我们一起来看看吧。
效果如下图所示
三角形所对方向"width: 0"，
反向为三角形高度(20)"border-width: 20px"，
反向颜色为三角形颜色"border-color: #eee"，
其它两个方向相加为三角形宽度(30)"border-width: 15px"
CSS:
代码如下 | 复制代码 |
span {
position: absolute;
width: 0;
height: 0;
border-width: 0 15px 20px 15px;
border-style: solid;
border-color: transparent transparent #eee transparent;
top: -20px;
left: 50%;
margin-left: -15px;
} |
例子
代码如下 | 复制代码 |
<!DOCTYPE html>
<html>www.111cn.net
<head>
<title>随心所欲的三角形</title>
<style>
div {
width: 200px;
height: 60px;
background-color: #eee;
position: absolute;
left: 50%;
margin-left: -150px;
margin-top: -50px;
top: 50%;
border-radius: 10px;
float: left;
font: 12px/20px "微软雅黑";
color: #000;
padding: 20px 50px;
}
span {
position: absolute;
top: -20px;
width: 0;
height: 0;
border-width: 0 15px 20px 15px;
border-style: solid;
border-color: transparent transparent #eee transparent;
left: 50%;
margin-left: -15px;
} www.111cn.net
</style>
</head>
<body>
<div>
<span></span>
三角形所对方向"width: 0"，反对的方向为三角形高度颜色为三角形颜色，其它两个方向相加为宽度
</div>
</body>
</html> |
css实现圆角三角形例子(无图片)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：
投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
