html - CSS 中边框样式的前后属性

Question

我正在研究 CSS 边框属性，我已经完成了边框半径、边框、边框宽度、边框颜色、边框折叠、边框图像等。我希望我的边框位于页面左侧，如图所示 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>