美文网首页
CSS 三角

CSS 三角

作者: Jay_ZJ | 来源:发表于2020-05-12 00:58 被阅读0次

原理

盒子宽高为0,添加border,每边border可构成三角形

正三角

  • html
<body>
  <div class="box"></div>
</body>
  • css
<style>
  .box {
    width: 0;
    height: 0;
    boder: 10px solid transparent;
    border-top-color: blue;
  }
</style>

非正三角

<style>
.box {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
</style>

相关文章

网友评论

      本文标题:CSS 三角

      本文链接:https://www.haomeiwen.com/subject/nxnmnhtx.html