这篇文章主要介绍怎么用CSS实现三角形标记，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 代码如下： CSSMark.html <!DOCTYPEhtml&g
这篇文章主要介绍怎么用CSS实现三角形标记，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
代码如下：
<!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实现三角形标记”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网html频道！
--结束END--
本文标题: 怎么用CSS实现三角形标记
本文链接: https://www.lsjlt.com/news/89706.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0