CSS上三角代码是一种常见的UI元素设计。它可以用来强调页面中的特定内容,如导航菜单、下拉列表等。下面将介绍几种CSS生成三角的方式。1. 使用border属性 <div class=
CSS上三角代码是一种常见的UI元素设计。它可以用来强调页面中的特定内容,如导航菜单、下拉列表等。下面将介绍几种CSS生成三角的方式。
1. 使用border属性
<div class="triangle"></div> .triangle { border-top: 60px solid red; border-left: 60px solid transparent; height: 0; width: 0; }
2. 使用transform属性
<div class="triangle"></div> .triangle { width: 100px; height: 100px; background: blue; transform: rotate(45deg); }
3. 使用伪元素:before
<div class="triangle"></div> .triangle { width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent white transparent; }
4. 使用伪元素:after
<div class="triangle"></div> .triangle { position: relative; width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent white transparent; } .triangle:after { content: '; display: block; position: absolute; top: -49px; left: -50px; width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent blue transparent; }
以上是几种常见的CSS生成三角的方法。当然还有其他的方式,如使用svg图形等,视需求而定。掌握好这些技巧,就可以运用它们来达到设计效果。
粉丝
0
关注
0
收藏
0