css - 具有透明 Angular 的元素边框

Question

我需要创建一个按钮或元素，其边框和透明 Angular 就像示例图像中那样。

我没有为此找到任何 css，我正在考虑放置 4 个 :after 元素来覆盖元素的 Angular 。您对此有任何纯 css 或 jquery 解决方案吗？

Answer 1

这是一个 example ，根据要求，使用background-image(即单色线性渐变)

button {
  border:3px transparent solid;
  background:tomato;
  padding:5px;
  margin:5px;
  display:inline-block;/* optionnal, it should be defaut layout */
  background-image:
    linear-gradient(to left, brown, brown),
    linear-gradient(to left, brown, brown),
    linear-gradient(to left, brown, brown),
    linear-gradient(to left, brown, brown);
  background-size:
    80% 2px,
    80% 2px,
    2px 80%,
    2px 80%;
  background-repeat:no-repeat;
  background-position:
    top, 
    bottom, 
    left, 
    right;
}