Question

我正在研究CSS边框属性，我已经完成了border-radius，border，border-width，border-color，border-collapse，border-image等。我希望我的边框位于页面左侧，如图click here for the image to be shown所示。任何人都可以教我这个。谢谢

Answer 1

您可以使用伪元素来获取相同的边框，您可以使用属性来了解它的工作原理。

下面我发布了一个例子

.box {
  width:150px;
  height:150px;
  border-radius:50%;
  background:green;
  position:relative;
}
.box:before {
  content:'';
  position:absolute;
  top:10%;
  transform:rotate(-10deg);
  -webkit-transform:rotate(-10deg);
  left:14px;
  width:0;
  height:0;
  display:block;
  border-top:10px solid green;
  border-bottom:10px solid transparent;
  border-right:10px solid transparent;
  border-left:10px solid transparent;
}

<div class="box"></div>

CSS中边框样式的Before和After属性

1 个答案: