如何在CSS形状中添加偏移轮廓? [英] How to add an offsetted outline to a CSS shape?

问题描述

在创建带有斜角边缘的块时，我会遇到一些问题，此外，我还需要对边框进行斜角处理并稍微偏离主块.问题在于，根据屏幕的不同，该块可能是响应式的.

我不知道确切的方法，希望每个人都能帮忙.

这就是我现在要做的

  .box {显示:flex;内边距:20px;高度:200px；宽度:300像素；颜色:#ffffff;背景:红色；职位:相对}.box .edge {宽度:18px；高度:10px；背景:#ffffff;位置:绝对；}.box .edge.top-left {顶部:-4px；左:-8px；变换:rotate(-45deg);}.box .edge.top-right {顶部:-4px；右:-8px；变换:rotate(45deg);}.box .edge.bottom-left {底部:-4px；左:-8px；变换:rotate(45deg);}.box .edge.bottom-right {底部:-4px；右:-8px；变换:rotate(-45deg);}  

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

解决方案

这是基于

也可以处理图片:

  .box {--c:10px;/* 角落 */--b:3px;/*边框厚度*/--o:-10px，-15px;/* 抵消*/--border-color:绿色；--bg-color:红色;宽度:200像素；高度:100px；显示:行内块；边距:30px;位置:相对；z-index:0;}.box:之前，.box:之后{内容:"";位置:绝对；z索引:-1；顶:0;左:0;对:0;底部:0;剪切路径:多边形(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))；背景:url(https://picsum.photos/id/1069/800/800)中心/封面；}.box:之后{--grad:透明49.5％，var(-border-color)50％;背景:linear-gradient(在右上方，var(-grad))在右上方，linear-gradient(在左上方，var(-grad))在左上方，线性渐变(到右下，var(-grad))右下，线性梯度(左下，var(-grad))左下;背景大小:calc(var(-c)-var(-b))calc(var(-c)-var(-b));背景重复:不重复；边框:var(-b)实心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>  

I have a bit of a problem with creating a block with beveled edges, in addition I need a border to be beveled and slightly off the main block. The problem is that this block can be Reponsive according to the screen.

I do not know the exact way to do it, hope everyone helps.

This is what I do now

.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>

解决方案

Here is an idea based on this previous answer. Simply adjust the different variables to get the result you want:

.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>

Works with image too:

.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形状中添加偏移轮廓?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！