html - 使用 CSS 方形偷工减料 - 这样可以吗？

Question

我接到了一项任务，要创建一些响应式方 Angular ，这些方 Angular 看起来像是在边缘被切掉了。

我想出了一些可行的方法。

因此，下面的代码有效，并且是预期的结果。但是，我不是 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

如果我试图完成同样的任务，我可能会追求 :before 和 :after 伪类。这将显着清理 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 仍然太多