自定义 CSS 带衬里的角

Question

我知道可以这样开角：

.left-corner {
  width: 0;
  height: 0;
  border-top: 100px solid powderblue;
  border-left: 100px solid transparent;
}

<div class="left-corner"></div>

是否可以用 CSS 用一个元素中的多种颜色制作一个角。像这样？

Answer 1

你可以使用 peusdo 元素并将其放在原始元素之上，如果你希望它看起来与你发布的图像完全一样。

请参阅下面的代码片段。

.left-corner{
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 120px solid transparent;
  
  position:relative;
}

.left-corner:before {
  content: "";
  
  position:absolute;
  top:-120px;
  left:-100px;
  
  border-top: 100px solid powderblue;
  border-left: 100px solid transparent;
}

<div class="left-corner"></div>

Answer 2

根据你对边框额外高度的要求（红色那个）....

...使用伪 class :after 为此使用 position:absolute.

...给你的 div 宽度和高度等于边框宽度即 100px 并应用 box-sizing:border-box.

...高度值由100² + 100²[=50的平方根计算=](因为 100 是你的 border-width) plus extra width 根据你的要求..(即 6 在这种情况下）。

...left 值将是 border-width
的一半
...top 值将是 (border-width+height)/2.

堆栈片段

.left-corner { width: 100px; height: 100px; border-top: 100px solid powderblue; border-left: 100px solid transparent; position: relative; box-sizing: border-box; } .left-corner:after { content: ""; position: absolute; top: -123.4213px; left: -52px; width: 6px; background: red; height: 147.4213px; transform: rotate(-45deg); border-radius: 4px; }

<div class="left-corner"></div>

Answer 3

您可以使用 transform: skew() 完成复杂的边框布局，如下所示：

* {
  margin: 0;
  padding: 0;
}

.left-corner {
  width: 0;
  height: 0;
  border-top: 100px solid black;
  border-left: 100px solid transparent;
}

.left-corner:before {
  content: "";
  position: absolute;
  top: 50px;
  left: 0px;
  border-top: 10px solid red;
  border-left: 100px solid red;
  transform: skew(0deg, 45deg);
}

<div class="left-corner"></div>

Answer 4

这是一个更简单的解决方案 linear-gradient:

body {
  background: pink;
}

.left-corner {
  width: 100px;
  height: 100px;
  background: linear-gradient(to top right, transparent 50%, red 50%, red 54%, blue 54%);
}

<div class="left-corner"></div>

如果需要，您还可以轻松创建出色效果：

body {
  background: pink;
}

.left-corner {
  width: 100px;
  height: 100px;
  background: 
  linear-gradient(to top right, transparent 48%, red 48%, red 52%, transparent 52%),
  linear-gradient(to top right, transparent 51%,blue 0%) 0 5px/calc(100% - 5px) calc(100% - 5px) no-repeat;
  border-radius:3px 0 3px 0;
}

<div class="left-corner"></div>

并且可以轻松设置多种颜色：

body {
  background: pink;
}

.left-corner {
  width: 100px;
  height: 100px;
  background: linear-gradient(to top right, transparent 45%, green 45%, green 48%, red 48%, red 52%, yellow 52%, yellow 56%, transparent 0%), 
  linear-gradient(to top right, transparent 50%, blue 0%) 0 5px/calc(100% - 5px) calc(100% - 5px) no-repeat;
  border-radius:5px 0 5px 0;
}

<div class="left-corner"></div>

自定义 CSS 带衬里的角

custom CSS corner with lining

html

css

css-shapes