pure CSS3 实现三角形 icon的方法 All In One
pure CSS3 实现三角形 icon的方法 All In One
border: color+transparent
transform : rotate() /rotateZ()
使用 实体字符 "◆" 实现三角形效果 ?
demos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
-webkit-overflow-scrolling: touch;
}
.container{
margin-left: 300px;
margin-top: 200px;
}
.box{
width:60px;
height:60px;
/*border: 1px solid #0f0;*/
float: left;
position: relative;
}
.b1{
background: #e66161;
}
.b1 .circle{
width: 10px;
height: 10px;
background: #fff;
position: absolute;
border-radius: 5px;
top: 25px;
left: 60px;
z-index: 9999;
}
.triangle{
width:0px;
height:0px;
border-width:30px;
border-style:solid;
/*border-color:#e66161 #f3bb5b #94e24f #85bfda;*/
border-color:transparent transparent transparent #e66161;
/*can not using border-radius, head is not the real triangle*/
}
</style>
</head>
<body>
<div>
<h1>-webkit-overflow-scrolling: touch;</h1>
</div>
<div class="container">
<div class="box b1">
<div class="circle">
<!-- -->
</div>
</div>
<div class="box">
<div class="triangle">
<!-- -->
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
-webkit-overflow-scrolling: touch;
}
.container{
margin-left: 300px;
margin-top: 200px;
background-color: #000;
width: auto;
height: auto;
overflow: hidden;
}
.box{
width:60px;
height:60px;
/*border: 1px solid #0f0;*/
float: left;
position: relative;
border-radius: 7px 0 0 7px;
}
.b1{
background: #2CCD76;
}
.b1 .circle{
width: 10px;
height: 10px;
background: #fff;
position: absolute;
border-radius: 5px;
top: 25px;
left: 60px;
z-index: 9999;
}
.b1 span{
color: #fff;
font-size: 1.5em;
display: inline-block;
/*text-align: center;*/
/*justify-content: center;*/
/*border: 1px solid red;*/
margin: 25% 8.3%;
}
.triangle{
width:0px;
height:0px;
border-width:30px;
border-style:solid;
/*border-color:#e66161 #f3bb5b #94e24f #85bfda;*/
border-color:transparent transparent transparent #2CCD76;
/*can not using border-radius, head is not the real triangle*/
}
</style>
<style>
.r-container{
margin-left: 300px;
margin-top: 10px;
background-color: #000;
width: auto;
height: auto;
overflow: hidden;
}
.r-box{
width:60px;
height:60px;
/*border: 1px solid #0f0;*/
float: left;
position: relative;
border-radius: 10px 7px 7px 10px;
background: #2CCD76;
z-index: 9999;
}
.r-box span{
color: #fff;
font-size: 1.5em;
display: inline-block;
/*text-align: center;*/
/*justify-content: center;*/
/*border: 1px solid red;*/
margin: 25% 8.3%;
}
.rr{
width:42.5px;
height:42.5px;
/*border: 1px solid #0f0;*/
float: left;
left: 35px;
top: 9px;
position: absolute;
background: #2CCD76;
transform: rotateZ(45deg);
/* rotate center ???*/
z-index: -1;
border-radius: 3px 5px;
}
.rr .rc{
width: 10px;
height: 10px;
background: #fff;
position: absolute;
border-radius: 5px;
top: 10px;
left: 22px;
}
</style>
</head>
<body>
<div>
<h1>-webkit-overflow-scrolling: touch;</h1>
</div>
<div class="container">
<div class="box b1">
<span>DEMO</span>
<div class="circle">
<!-- -->
</div>
</div>
<div class="box">
<div class="triangle">
<!-- -->
</div>
</div>
</div>
<hr>
<div class="r-container">
<div class="r-box">
<span>DEMO</span>
<div class="rr">
<div class="rc">
<!-- -->
</div>
</div>
</div>
</div>
</body>
</html>
refs
©xgqfrms 2012-2025
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！
本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/5947745.html
未经授权禁止转载，违者必究！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
2015-10-10 如何Excel表中显示正确格式的身份证号码
2015-10-10 D3.js Data-Driven Documents Sequences sunburst (Data Visualization Projects)
2015-10-10 D3.js Data-Driven Documents
2015-10-10 JavaScript 实现 (ECMAScript 6)