Question

我需要为css形状添加边框颜色，但我不知道该怎么做。我已尝试使用border-width或.shape { width: 400px; height: 40px; background-color: green; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); }，但无法使用。

这是我的代码：

＆＃13;

<div class="shape"></div>

＆＃13;

SQL Server 2012

＆＃13;

谢谢

Answer 1

伪元素

执行此操作的一个好方法是使用像:before

这样的伪元素

制作完全相同的形状，但稍微小一点，可以保持你想要的主色，并正确定位，你就可以得到你想要的边框。

＆＃13;

.shape {
  width: 400px;
  height: 40px;
  background-color: black;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  position: relative;
}

.shape:before {
  content: '';
  width: 398px;
  height: 38px;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  background: green;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
}

＆＃13;

<div class="shape"></div>

＆＃13;

Answer 2

一个简单的解决方法是使用伪和transform: skew()。

transform: skew()也提供了比clip-path更好的浏览器支持。

.shape {
  position: relative;
  width: 380px;
  height: 40px;
  background-color: green;
  border: 2px solid red;
  margin-left: 25px;
}

.shape::before {
  content: '';
  position: absolute;
  left: -20px;
  top: -2px;
  width: 40px;
  height: 100%;
  border: inherit;
  background-color: inherit;
  border-right-width: 0;
  transform: skewX(-30deg);
}

<div class="shape"></div>

Answer 3

尝试添加此内容：

{
...
border: 1px black solid;
...
}

解释：

.shape
    {
      border: 1px black solid;
      width: 400px;
      height: 40px;
      background-color: green;
      -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
      clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }

<div class="shape"></div>

CSS - 如何为css形状添加边框颜色

3 个答案:

伪元素