如何向 CSS 形状添加偏移轮廓？

Question

我在创建具有斜边的块时遇到了一点问题，此外我需要一个边框进行斜切并稍微偏离主块。问题是这个块可以根据屏幕响应。

不知道具体的做法，希望大家帮忙。

这就是我现在所做的

.box {
  display: flex;
  padding: 20px;
  height: 200px;
  width: 300px;
  color: #ffffff;
  background: red;
  position: relative;
}

.box .edge {
  width: 18px;
  height: 10px;
  background: #ffffff;
  position: absolute;
}

.box .edge.top-left {
  top: -4px;
  left: -8px;
  transform: rotate(-45deg);
}

.box .edge.top-right {
  top: -4px;
  right: -8px;
  transform: rotate(45deg);
}

.box .edge.bottom-left {
  bottom: -4px;
  left: -8px;
  transform: rotate(45deg);
}

.box .edge.bottom-right {
  bottom: -4px;
  right: -8px;
  transform: rotate(-45deg);
}

<div class="box">
  <div class="edge top-left"></div>
  <div class="edge top-right"></div>
  <div class="edge bottom-left"></div>
  <div class="edge bottom-right"></div>
  <div class="content">
    content
  </div>
</div>

Answer 1

您可以使用 outline 属性创建边框，可以使用 outline-offset 创建边框属性。并使用 overflow:hidden 属性.

隐藏角落的溢出元素

例如：

.box{
     outline:5px solid black;
     outline-offset:5px;
     overflow:hidden;
    }

Answer 2

这是一个基于的想法。只需调整不同的变量即可获得您想要的结果：

.box {
  --c:10px; /* the corner */
  --b:3px;  /* border thickness*/
  --o:-10px,-15px; /* offset*/
  --border-color:green;
  --bg-color:red;

  width: 200px;
  height: 100px;
  display:inline-block;
  margin:30px;
  position:relative;
  z-index:0;
}

.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  clip-path: polygon(var(--c) 0%, calc(100% - var(--c)) 0%, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0% calc(100% - var(--c)), 0% var(--c));
  background:var(--bg-color);
}

.box:after {
  --grad:transparent 49.5%,var(--border-color) 50%;
  background: 
    linear-gradient(to top right   ,var(--grad)) top    right,
    linear-gradient(to top left    ,var(--grad)) top    left,
    linear-gradient(to bottom right,var(--grad)) bottom right,
    linear-gradient(to bottom left ,var(--grad)) bottom left;
  background-size:calc(var(--c) - var(--b)) calc(var(--c) - var(--b));
  background-repeat:no-repeat;
  border: var(--b) solid var(--border-color);
  transform:translate(var(--o));
}

<div class='box'></div>

<div class='box' style="--c:40px;--b:2px;--o:10px,-20px;--border-color:blue;--bg-color:orange"></div>

也适用于图像：

.box {
  --c:10px; /* the corner */
  --b:3px;  /* border thickness*/
  --o:-10px,-15px; /* offset*/
  --border-color:green;
  --bg-color:red;

  width: 200px;
  height: 100px;
  display:inline-block;
  margin:30px;
  position:relative;
  z-index:0;
}

.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  clip-path: polygon(var(--c) 0%, calc(100% - var(--c)) 0%, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0% calc(100% - var(--c)), 0% var(--c));
  background:url(https://picsum.photos/id/1069/800/800) center/cover;
}

.box:after {
  --grad:transparent 49.5%,var(--border-color) 50%;
  background: 
    linear-gradient(to top right   ,var(--grad)) top    right,
    linear-gradient(to top left    ,var(--grad)) top    left,
    linear-gradient(to bottom right,var(--grad)) bottom right,
    linear-gradient(to bottom left ,var(--grad)) bottom left;
  background-size:calc(var(--c) - var(--b)) calc(var(--c) - var(--b));
  background-repeat:no-repeat;
  border: var(--b) solid var(--border-color);
  transform:translate(var(--o));
}

<div class='box'></div>

<div class='box' style="--c:40px;--b:2px;--o:10px,-20px;--border-color:blue;"></div>

如何向 CSS 形状添加偏移轮廓？

How to add an offsetted outline to a CSS shape?

html

css

css-shapes