时间戳

首页 > 解决方案 > 使用线性渐变将顶部切角移动到底部

html - 使用线性渐变将顶部切角移动到底部

问题描述

早上好，

我需要以下附加图片的帮助：

切角

使用线性渐变如何将顶角移动到底角并使顶角像其他角一样方/锐利。请参阅下面的当前 css：

body.page {
  background: url(../img/Login-bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  font-size: 14px;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.cut-corner {
  position: relative;
  color: #4a4a4c;
  background-repeat: no-repeat;
  background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
    linear-gradient(to bottom left, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
  background-size: 1.5px 100%, 1.5px 100%, 100% 1.5px, 100% 1.5px, 65px 65px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 65px, -65px 0%, 0px 100%, 100% 0%, -65px 0%, 100% 65px;
  margin: 25px;
}

.cut-corner:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: -1;
  opacity: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
    linear-gradient(to bottom left, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
  background-size: 0.5px 100%, 1.5px 100%, 100% 0.5px, 100% 1.5px, 65px 65px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 65px, -65px 0%, 0px 100%, 100% 0%, -65px 0%, 100% 65px;
}

HTML：

<body class="page cut-corner">
...
</body>

任何帮助将不胜感激。

标签： htmlcssbootstrap-4

解决方案

您可以尝试如下，渐变的组合，clip-path更容易处理

.box {
  margin:10px;
  height:200px;
  border: 2px solid red;
  background:
    linear-gradient(to bottom right,transparent 50%,red 50.5%) 
    bottom right/50px 50px no-repeat;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 50px),calc(100% - 50px) 100%, 0 100%); 
}

body {
  background:yellow;
}
<div class="box"></div>

使用 CSS 变量轻松调整角落：

.box {
  --c:50px;
  
  margin:10px;
  height:200px;
  border: 2px solid red;
  background:
    linear-gradient(to bottom right,transparent 50%,red 50.5%) 
    bottom right/var(--c) var(--c) no-repeat;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%, 0 100%); 
}

body {
  background:yellow;
}
<div class="box"></div>

<div class="box" style="--c:100px;"></div>

推荐阅读