如何在Wordpress主题上只显示一些角边框？

Question

在漫长的两天里，我试图在我妻子网站的图片和文本框周围放置一些角边框。你们知道一个简单的方法吗？

今天我正在尝试使用这个：

.wp-block-uagb-image {
    position: relative;
}


.wp-block-uagb-image::before {
    content: ''; 
    position: absolute; 
    top: -12px; 
    right: -2%; 
    width: 2px; 
    height: calc(50% + 20px); 
    background-color: #000; 
    z-index: 2; 
}


.wp-block-uagb-image::after {
    content: ''; 
    position: absolute; 
    top: -2%; 
    right: -11px; 
    width: calc(50% + 20px);
    height: 2px;
    background-color: #000;
    z-index: 1; 
}

但是这样我就很难将台词放在一起，而且，当我转到移动版本时，它会发生很大的变化！

这就是我正在尝试做的网站。这个想法是用细线跟随徽标的 ID。这就是为什么我也想将它添加到文本框的左下角，例如！

（由于某种原因，边框也出现在页脚上！:(

提前谢谢您！

我尝试从 stackoverflow 主题中获取：

img {
  --s: 50px; /* the size on the corner */
  --t: 5px;  /* the thickness of the border */
  --g: 20px; /* the gap between the border and image */
  
  padding: calc(var(--g) + var(--t));
  outline: var(--t) solid #B38184; /* the color here */
  outline-offset: calc(-1*var(--t));
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

链接：如何只显示角边框？

但我看不懂面具！

谢谢！

Answer 1

您链接到的

问题有许多不同质量的建议解决方案。我更喜欢的答案是@RobertKirsz的答案，它非常适合您的要求。

:root {
  --pbw: 2px;
}
.cb {
  display: inline-block;
  padding: 6px;
  background:
    linear-gradient(to left, black var(--pbw), transparent var(--pbw)) 100% 0,
    linear-gradient(to bottom, black var(--pbw), transparent var(--pbw)) 100% 0;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}
.cb>img {
  display: block;
}

<span class="cb">
  <img src="http://picsum.photos/220/150">
</span>