一个元素实现3个回图形.md

title	date
一个元素实现3个回图形	2017/02/21 14:47:11

题目

如何用一个html元素实现三个回子类似的图形？

解题方案

方案一，利用outline和outline-offset结合伪元素来实现。

.test, .test::before, .test:after{
  height: 100px;
  width: 100px;
  border: 1px solid blue;
  outline: 1px solid red;
  outline-offset: 10px;
}
.test::before, .test::after{
  content: '';
  display: block;
}
.test::before{
  margin-left: 150px;  
}
.test::after{
  margin-top: -100px;
  margin-left: 300px;
}

方案二，利用box-shadow来模拟边框实现

.test{
  position:relative;
  border: 1px solid red;
  height: 150px;
  width: 120px;
  box-shadow: 275px 0px 0 0px white, 275px 0px 0 1px red;;
}
.test::before{
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  left: 10px;
  top: 25px;
  border: 1px solid blue;
  box-shadow:135px 0 0px 0px white, 135px 0 0px 1px blue,  275px 0px 0 0px white, 275px 0px 0 1px blue;;
}
.test::after{
  content: '';
  display: block;
  position:absolute;
  width: 120px;
  height: 150px;
  left: 135px;
  top: 0;
  border: 1px solid red;
}