Question

我被赋予了一项任务，即创建一些看起来像边缘切割的响应方角。

我想出了一些有用的东西。

所以，下面的代码有效，这是预期的结果。但是，我不是CSS之王，所以我想知道是否有人可以说更多经验，例如：

“哦，那？？我可以用一行代码完成它。：p”

或者

“哦？！那？？这太假了。看看这个替代方案！”。

是这样的吗？

提前谢谢你。

供您考虑，代码：

p{
  margin: 0;
  padding: 0;
}

.module-wrapper {
    width: 20%;
    margin: 40px auto;
}

.sub-module {
  margin: 0 -5px;
}

.sub-module p {
    padding: 10px;
    color: white;
    text-align: center;
}

.type {
    background-color: red;
}

.local {
  background: black;
  padding-bottom: 5px;
}


.local p {
    background-color: black;
}

.title {
  background: green;
  padding-top: 5px;
}

.title p {
    background-color: green;
}

<div class="module-wrapper">
<div class="title">
  <div class="sub-module">  
      <p class="title">
          Jump Session Outdoor Editon
      </p>
  </div>
</div>    
<div class="sub-module type">
    <p>Party</p>
</div>
<div class="local">
  <div class="sub-module">  
      <p>
          London
      </p>
  </div>
</div>
</div>

再次感谢

Answer 1

如果我试图完成相同的任务，我可能会追求：之前和之后：伪类。这将显着清理HTML标记。这里可以看到一个例子，我只用顶部来说明风格。

http://codepen.io/justindunham/pen/ayFAo

<ul>
  <li class="bg-red sq-cut-top">Title One</li>
  <li class="bg-green">Title Two</li>
  <li class="bg-black">Title Three</li>
</ul>

.sq-cut-top:before {
  content: "";
  display:block;
  height: 4px;
  width: 5px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
}

编辑：每个评论添加HTML，仍有太多CSS发布

Answer 2

您始终可以使用BEM methodology命名该课程这将减少几行HTML和CSS。

HTML：

<div class="cutCorners">
    <div class="cutCorners-top">
        <p class="cutCorners-sub">Jump Session Outdoor Editon</p> 
    </div>

    <p class="cutCorners-sub">Party</p>

    <div class="cutCorners-bottom">
        <p class="cutCorners-sub">London</p>
    </div>
</div>

CSS：

* {
    padding: 0;
    margin: 0;
}

.cutCorners { 
    width: 20%;
    margin: 0 auto;
}

.cutCorners-sub { 
    padding: 10px;
    margin: 0 -5px;

    text-align: center;
    color: #fff;

    background: red;
}

.cutCorners-top { 
    padding-top: 5px;
}

.cutCorners-bottom { 
    padding-bottom: 5px;
}

.cutCorners-top,
.cutCorners-top .cutCorners-sub {
    background: black;
}

.cutCorners-bottom,
.cutCorners-bottom .cutCorners-sub {
    background: green;
}

Here's a jsFiddle

使用CSS方形切角 - 这样可以吗？

2 个答案: