首页 > Web开发 > 详细

【css】 三角形--左上角

时间:2020-05-19 17:08:06      阅读:148      评论:0      收藏:0      [点我收藏+]

效果

技术分享图片

 

 

代码

  .step-dom{
         position: relative;
         padding: 35px 35px 12px 35px;
         border-bottom: 4px solid #e8e8e8;
         .triangle-topleft {
             display: inline-block;
             width: 0;
             height: 0;
             border-top: 52px solid #d9d9d9;
             border-right: 60px solid transparent;
             position: absolute;
             top: 0;
             left: 0;
         }
         .ribbon-green {
             color: rgb(95, 28, 204);
             text-align: center;
             text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
             -webkit-transform: rotate(-45deg);
             transform: rotate(-45deg);
             -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
             position: absolute;
             padding: 10px 0;
             left: 1px;
             top: -1px;
             font-size: 12px;
         }
     }

  

【css】 三角形--左上角

原文:https://www.cnblogs.com/522040-m/p/12917787.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!