Are square corners with CSS ok?
I was tasked with creating some responsive square corners that appear to be cut at the edges.
I came up with something that works.
So the code below works and this is the expected result. However, I'm not the king of CSS, so I'm wondering if anyone has more experience I can say, something like:
"Oh yes? I can accomplish this using one line of code.: P"
or
"Oh it ?! It's so dummy. Look at this alternative!"
Is this the case?
Thanks in advance.
For your consideration, the code:
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>
Thanks again
source to share
If I was trying to accomplish the same task, I would probably chase the: before and: after pseudo class. This will make the HTML markup much easier. An example can be seen here, I just made the top to illustrate the style.
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;
}
Edit: Added HTML for comment, still too much CSS to post
source to share
You can always name the class using the BEM methodology .
This will cut a few lines of HTML and 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;
}
source to share