实现元素多样角

时间：2020-06-08 17:40:14 阅读：46 评论：0 收藏：0 [点我收藏+]

场景一：元素缺角。

方法一：画三角形遮住要缺的角，三角形颜色和“画布”元素一样

.bigBox {

width: 400px;

height: 400px;

margin: 0 auto;

background-color: black;

border: solid 1px transparent;

.box {

width: 200px;

height: 200px;

background-color: darkblue;

margin: 100px auto;

position: relative;

// 第一步画三角形

&::before{

content: ‘‘;

width: 0px;

height: 0px;

position: absolute;

top: 0px;

left: 0px;

border-right-color: transparent;

border-bottom-color: transparent;

// 取和画布相同的颜色遮住

// border: solid 40px black;

}

第一步画完三角形后的：

技术分享图片

第二步：三角形取画布的黑色后

技术分享图片

方法二：用css的渐变linear-gradient（）。

  .way{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background:
// 渐变设置
    linear-gradient(135deg, transparent 40px, darkblue 0)
  }

结果如图：

技术分享图片

场景二：需要多个角

原理：四个单角的拼接完成

方法一：四个子元素用绝对定位拼接起来。

局限：如果父元素需要装整体的内容有局限，可以用只有装饰的。

    <div class="way">
      <div class="left-top"></div>
      <div class="right-top"></div>
      <div class="left-bottom"></div>
      <div class="right-bottom"></div>
    </div>

  .way{
    position: relative;
    height: 400px;
    width: 400px;
.left-top{
  height: 200px;
  width: 200px;
  background-color: lightcyan;
  position: absolute;
  top: 0px;
  left: 50%;
  background:
    linear-gradient(135deg, transparent 20px, darkblue 0) top left;
}
.right-top{
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0px;
  left: 100%;
  background:
    linear-gradient(-135deg, transparent 20px, darkblue 0) top right,
}
.left-bottom{
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 100%;
  background:
    linear-gradient(-45deg, transparent 20px, darkblue  0) bottom right,
}
.right-bottom{
  height: 200px;
  width: 200px;
  position: absolute;
  bottom: 0%;
  right: 0%;
  background:
    linear-gradient(45deg, transparent 20px, darkblue  0) bottom right,
}

结果：

技术分享图片

方法二：分块背景图设置

    <div class="ways"></div>

  .ways{
    width: 400px;
    height: 400px;
    background:
    linear-gradient(135deg, transparent 20px, lightcyan 0) top left,
    linear-gradient(-135deg, transparent 20px, lightcyan 0) top right,
    linear-gradient(-45deg, transparent 20px, lightcyan 0) bottom right,
    linear-gradient(45deg, transparent 20px, lightcyan 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  }

结果：

技术分享图片

场景三：弧度的角

方法：径向渐变

  .cricle{
     width: 400px;
    height: 400px;
    margin: 20px auto;
  background:
      radial-gradient(circle at top left, transparent 30px, lightPink 0) top left,
      radial-gradient(circle at top right, transparent 30px, lightPink 0) top right,
      radial-gradient(circle at bottom right, transparent 30px, lightPink 0) bottom right,
      radial-gradient(circle at bottom left, transparent 30px, lightPink 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  }

结果：

技术分享图片

注意：

1、渐变：ie9及ie9之前的浏览器不支持渐变

参考链接：https://www.jb51.net/css/707136.html

实现元素多样角

原文：https://www.cnblogs.com/xieZhao/p/13039759.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)