Question

我刚刚使用Twitter引导程序设计了一个带有中心div的twitter引导程序，该div具有彩色的角。我使用了伪元素:: before和:: after。我现在在左上角有一个彩色的角，在右上角有一个。

但是我也希望他们在两个角落。有没有办法反映它们或类似的东西？

我的代码如下

.wrapper {
  height: 100%;
  width: 100%;
  background-color: red;
}

.wrapper .row {
  margin: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

#content {
  background-color: green;
  height: 900px;
  padding: 50px;
}

#content::before {
  top: 0%;
  left: 0%;
  content: '';
  position: absolute;
  width: 40px;
  border-color: blue;
  border-style: solid;
  border-width: 7px 0px 0px 7px;
  height: 40px;
}

#content::after {
  top: 0%;
  right: 0%;
  content: '';
  position: absolute;
  width: 40px;
  border-color: blue;
  border-style: solid;
  border-width: 7px 7px 0px 0px;
  height: 40px;
}

<div class="wrapper">
  <div class="row">
    <div id="content" class="col-xl-8">
    </div>
  </div>
</div>

http://jsfiddle.net/aq9Laaew/224762/

希望你能帮助我

每个角都有镜像伪元素

0 个答案: