3.CSS图像绘制之：三角图标

最新推荐文章于 2023-01-06 16:03:46 发布

majun0007

最新推荐文章于 2023-01-06 16:03:46 发布

阅读量414

点赞数 1

分类专栏：（CSS中级篇）网页纯CSS绘制效果绘汇总个人作品汇总文章标签： html CSS CSS3

本文链接：https://blog.youkuaiyun.com/majun0007/article/details/55001228

版权

个人作品汇总同时被 2 个专栏收录

14 篇文章

订阅专栏

（CSS中级篇）网页纯CSS绘制效果绘汇总

7 篇文章

订阅专栏

一、HTML

<h1>Lorem ipsum</h1>

<p>Ne maluisset sententiae qui, mucius epicuri reprimique et cum, sumo saperet laboramus et pri. An ignota incorrupte quo, ex his dicta nominavi, erat consulatu eum cu. Eum ea illum assum dictas, tincidunt reprimique est eu.</p>

</article>

二、CSS

/*页面背景*/
body {
   background:#d4676a;
   margin:50px;
   font-family:sans-serif;
}
article{
   background:#FFF;
   border-radius:4px;
   padding:20px 40px;
   width:400px;
   box-shadow:5px 7px 1px rgba(0,0,0,.1);
   position:relative;
}
article h1{
   color:#d4676a;
}
article p{
   color:#666;
}

article::after{

content:'';

/*绘制四个三角形*/

width:0;

height:0;

border-width:15px 20px;

border-style:solid;

/*绘制四个三角形，只显示右边一个三角形*/

border-color:transparent #FFF transparent transparent;

position:absolute;

left:-40px;

top:35px;

}

article::after,article::before{
   content:'';
   width:0;
   height:0;
   border-width:10px;
   border-style:solid;
   position:absolute;
   top:42px;
   border-color:transparent transparent transparent #d4676a;
   right:20px;
}
article::after{
    /*向左移挡住一部分三角形，形成箭头*/

right:25px;
border-color:transparent transparent transparent #FFF;
}