温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用CSS实现三角形标记

发布时间:2022-02-28 15:31:44 来源:亿速云 阅读:126 作者:小新 栏目:web开发

这篇文章主要介绍怎么用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实现三角形标记”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI