Question

试图获得这个＆＃34;斜角切口＆＃34;看。如果可能的话，我不想使用伪元素的任何黑客。

HTML会像以下一样简单：

   <span>Hello World</span>

CSS：

   span {
     // some crazy new css-3 rule?
   }

我不关心旧浏览器，解决方案必须具有响应能力。

Answer 1

不，CSS3中没有这样的疯狂规则（CSS4 *中没有），所以你可以创建一个SVG，或者使用不需要的伪（或者2个额外的内部元素，恕我直言更糟糕的是）

这是使用伪

的最简单，最不起眼的解决方案

span {
  position: relative;
  display: inline-block;
  padding: 10px 20px 10px 25px;
  margin: 10px;
}
span::before, span::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 50%;
  border: 2px solid #ddd;
  background: #eee;
  z-index: -1;
}
span::before {
  border-bottom: none;
  transform: skewX(40deg);
}
span::after {
  top: 50%;
  border-top: none;
  transform: skewX(-40deg);
}

/* second span */
span ~ span {
  font-size: 32px;
}

<span>Hello World</span>
<br>
<span>Hello World</span>

在CSS4中，我们可能会选择范围更广的border shapings

Answer 2

我使用<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3 calendar-wrapper"></div> <div class="col-md-9 col-sm-9 col-xs-9 property-wrapper"> <div class="property-animated-background"> <div class="property-masker-one"></div> <div class="property-masker-two"></div> <div class="property-masker-three"></div> <div class="property-masker-four"> <div class="col-md-1 col-sm-1 col-xs-1 col-md-push-3 col-sm-push-3 col-xs-push-3 property-masker-sub-four-one"></div> </div> <div class="property-masker-five"></div> </div> </div> </div> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3 paid-wrapper"></div> <div class="col-md-9 col-sm-9 col-xs-9 details-wrapper"> <div class="details-animated-background"> </div> </div> </div> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>为剪切角做了一个示例。

CSS3

.quote {
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
}
.q{
  background: #000;
  color: #fff;
  position: relative;
  z-index: 1;
  padding:10px;
  margin:100px;
  width:100px;
  border-right: 10px solid black;
}
.quote:after {
  background: inherit;
  bottom: -11px;
  content: '';
  display: block;
  height: 200%;
  left: -50px;
  position: absolute;
  right: -10px;
  transform: skewX(-35deg);
  transform-origin: 100%;
  z-index: -1;
}

.quote:before {
  background: inherit;
  top: -11px;
  content: '';
  display: block;
  height: 200%;
  left: -50px;
  position: absolute;
  right: -10px;
  transform: skewX(35deg);
  transform-origin: 100%;
  z-index: -1;
}

.q:after{
      background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 10px;
  top:20px;
  position: absolute;
  right: -50px;
  transform: skewX(-35deg);
  transform-origin: 100%;
  z-index: -1;
}
.q:before{
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 10px;
  top:-00px;
  position: absolute;
  right: -50px;
  transform: skewX(35deg);
  transform-origin: 100%;
  z-index: -1;
}

有没有办法在元素上使用CSS3制作角度？

2 个答案: