美文网首页
纯CSS绘制三角形

纯CSS绘制三角形

作者: love_peaches | 来源:发表于2021-08-10 18:36 被阅读0次

记录一下,方便下次抄,哈哈

/* 正三角 */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent pink transparent;
 }

 /* 倒三角 */
 .down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 40px 25px 0 25px;
   border-color:  pink transparent transparent transparent;
 }

效果如下:


image.png

相关文章

  • css绘制三角形和对号

    CSS绘制三角形 div css 效果 CSS绘制对号 div css 效果

  • 纯CSS绘制三角形(各种角度)0

    纯CSS绘制三角形(各种角度):来源于:https://www.jb51.net/article/42513.ht...

  • CSS绘制三角形

    纯CSS绘制三角形,实现原理是将宽高设置为0,设置边框来形成三角形的样式。 首先我们绘制一个宽高为0,边框为30的...

  • 绘制对话框

    Time: 20200131 三角形的绘制 HTML CSS样式 对话框的绘制 HTML CSS样式 显示效果 END.

  • [CSS] 纯CSS绘制三角形

    利用border属性,可以绘制三角形。将border-bottom设置为npx solid gray,其他bord...

  • css绘图基本图形

    一、css绘制三角形(一)基础css.xiasanjiao{width:0;height:0;overflow:h...

  • css 实现三角形箭头

    插入DOM 使用伪类 参考:用纯CSS实现的箭头CSS画三角形原理css整理 -- 右箭头,上下箭头,三角形 这个...

  • 纯css绘制三角形

    利用css的border属性可以方便的绘制出三角形;

  • 纯CSS绘制三角形

    相信很多人在处理li图形的时候,都会很纳闷,为什么list-style-type没有三角图案,难度要在网上下个三角...

  • 纯CSS绘制三角形

    记录一下,方便下次抄,哈哈 效果如下:

网友评论

      本文标题:纯CSS绘制三角形

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