CSS3实现折角样式效果

实现思路如下:

用linear-gradient实现戒掉右上角的效果

用::after实现一个小矩形

用linear-gradient截去小矩形的一半

用box-shadow制造阴影效果

用linear-gradient实现截掉右上角的效果background: linear-gradient(225deg, transparent 32px, pink 0 );为啥要用225deg,因为这个渐变是从左下角开始的,如果我们想要在右上角折出一个45度的三角形,那么就需要使用180deg+45deg=225deg

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <style>
    #addColor{
         width: 300px;
          height: 150px;
          background: linear-gradient(225deg, transparent 32px, pink 0 );
          border-radius: 4px;
    }
  </style>
  <body>
    <div id="addColor"> </div>
  </body>
</html>

第二、用::after实现一个小矩形 ,重点是如何确定矩形的宽度和高度为45px,这个要根据第一步的transparent 32px,32px(黄色的线长度)和所截取的三角形的角度,这里我们三角形的角度是45度计算所得,橙色正方形的宽 = 根号2 X 32px(根号2约等于1.41),所以最终宽大约等于45px

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <style>
    #addColor{
         width: 300px;
          height: 150px;
          background: linear-gradient(225deg, transparent 32px, pink 0 );
          position: relative;
          border-radius: 0.5em;
    }
    #addColor::after{
            content: "";
            position: absolute;
            right: 0px;
            top:0px;
            background: orangered;
            width: 45px;
            height:  45px;
    }
  </style>
  <body>
    <div id="addColor"> </div>
  </body>
</html>


第三、用linear-gradient截去小矩形的一半

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <style>
    #addColor{
         width: 300px;
          height: 150px;
          background: linear-gradient(225deg, transparent 32px, pink 0 );
          position: relative;
          border-radius: 0.5em;
    }
    #addColor::after{
            content: "";
            position: absolute;
            right: 0px;
            top:0px;
            background: linear-gradient(225deg, transparent 50%, orangered 0);
            width: 45px;
            height:  45px;
    }
  </style>
  <body>
    <div id="addColor"> </div>
  </body>
</html>


第四、用box-shadow制造阴影效果,和把小矩形的颜色橙色改为粉色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <style>
    #addColor{
         width: 300px;
          height: 150px;
          background: linear-gradient(225deg, transparent 32px, pink 0 );
          position: relative;
          border-radius: 0.5em;
    }
    #addColor::after{
            content: "";
            position: absolute;
            right: 0px;
            top:0px;
            background: linear-gradient(-135deg, transparent 50%, pink 0);
            width: 45px;
            height:  45px;
            border-bottom-left-radius: 4px;
            box-shadow: -0.2em 0.2em 0.2em #7a3a44;
    }
  </style>
  <body>
    <div id="addColor"> </div>
  </body>
</html>

总结:实现这个效果主要用到了linear-gradient,box-shadow,::after ,如果不熟悉可以去补充一下相应的知识

本文永久地址:http://www.huanghaiping.com/article/90.html
本文出自 黄海平博客 ,转载时请注明出处及相应链接。

发表我的评论
  

网友最新评论 (0)

暂无评论
返回顶部