您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍怎么用CSS实现三角形标记，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
代码如下：
CssMark.html
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<linkrel="stylesheet"type="text/css"href="CssMark.css"/>
</head>
<body>
<divclass="TriMarkPre0"></div>
<br/>
<divclass="TriMarkPre1"></div>
<br/>
<divclass="TriMarkPre2"></div>
<br/>
<divclass="TriMark"></div>
</body>
</html>
CssMark.css
.TriMarkPre0{
position:static;
width:100px;
height:100px;
border:10pxsolidtransparent;
border-color:#0058e2;
}
.TriMarkPre1{
position:static;
width:100px;
height:100px;
border:10pxsolidtransparent;
border-left-color:#0058e2;
}
.TriMarkPre2{
position:static;
width:0px;
height:0px;
border:10pxsolidtransparent;
border-left-color:#0058e2;
}
.TriMark{
position:static;
width:0px;
height:0px;
border:5pxsolidtransparent;
border-left-color:#0058e2;
}
代码详解
创建流程1:
下面的代码是绘制100x100像素区域的外框的代码。这是一般代码。
执行结果图像顶部的方框对应于该代码。
<divclass="TriMarkPre0"></div>
.TriMarkPre0{
position:static;
width:100px;
height:100px;
border:10pxsolidtransparent;
border-color:#0058e2;
}
创建过程2：
使用下面的代码，仅绘制区域框架的左侧。如果您绘制左侧，您可以看到拐角部分是对角切割的。（当绘制4个边时，只绘制一半以使每条线不重叠。）
此代码对应于将执行结果图像的第二个梯形向侧面的代码。
<divclass="TriMarkPre1"></div>
.TriMarkPre1{
position:static;
width:100px;
height:100px;
border:10pxsolidtransparent;
border-left-color:#0058e2;
}
完成:
可以使用以下代码绘制三角形标记。
通过减小前一行左侧代码的高度，行之间的部分将消失，它将显示为三角形标记。
执行结果图像的第三个图对应于该代码。
<divclass="TriMarkPre2"></div>
.TriMarkPre2{
position:static;
width:0px;
height:0px;
border:10pxsolidtransparent;
border-left-color:#0058e2;
}
您可以通过减小线的边框宽度来更改三角形标记的大小。
执行结果图像的第四个图对应于该代码。
<divclass="TriMark"></div>
.TriMark{
position:static;
width:0px;
height:0px;
border:5pxsolidtransparent;
border-left-color:#0058e2;
}
以上是“怎么用CSS实现三角形标记”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。