HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

Creating elements with special corners

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
codereviewhtmlcssstackoverflow
elementscreatingwithspecialcorners

Problem

I've been given a task to create elements with some special corners, and those elements should be responsive.

This works, but am I wondering if something better could come up.
Less code to maintain.

I wish NOT to use any CSS Preprocessor. I prefer the more readable pure and simple CSS.

jsFiddle





Jump Session Outdoor Editon





Party




London





CSS:

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;
}

Solution

Yes, you can reduce your markup! How small? This small:


  Jump Session Outdoor Editon    
  Party
  London


How? With pseudo elements. http://codepen.io/cimmanon/pen/sIgju

.module-wrapper {
  width: 20%;
  margin: 40px auto;
  padding: 10px 0;
  color: white;
  text-align: center;
}
.module-wrapper:before, .module-wrapper:after {
  content: '';
  display: block;
  height: 10px;
}
.module-wrapper > :first-child, .module-wrapper > :last-child {
  position: relative;
}
.module-wrapper > :first-child:before, .module-wrapper > :last-child:after {
  content: '';
  display: block;
  background-color: inherit;
  height: 10px;
  position: absolute;
  left: 10px;
  right: 10px;
}
.module-wrapper > :first-child:before {
  top: -10px;
}
.module-wrapper > :last-child:after {
  bottom: -10px;
}
.module-wrapper div {
  padding: 15px;
}
.module-wrapper .title {
  background: green;
}
.module-wrapper .type {
  background-color: red;
}
.module-wrapper .locale {
  background: black;
}


Now I know you're convinced that you don't need a CSS Preprocessor because you're certain that vanilla CSS is more readable. But what if you wanted to change the size of your corner cut-outs? How do you know which value you need to change? Here's the Sass I used to generate the above CSS:

$corner-width: 10px;
$corner-height: 10px;

.module-wrapper {
  width: 20%;
  margin: 40px auto;
  padding: 10px 0;
  color: white;
  text-align: center;

  // the pseudo elements here prevent us from having
  // to do the math on the parent element's margin
  // to ensure there's no overlap from preceding/
  // following elements
  &:before, &:after {
    content: '';
    display: block;
    height: $corner-height;
  }

  > :first-child, > :last-child {
    position: relative;
  }

  // this is where the illusion of the "corner"
  // happens
  > :first-child:before, > :last-child:after {
    content: '';
    display: block;
    background-color: inherit;
    height: $corner-height;
    position: absolute;
    left: $corner-width;
    right: $corner-width;
  }

  > :first-child:before {
    top: -$corner-height;
  }

  > :last-child:after {
    bottom: -$corner-height;
  }

  // pretty up our child elements
  div {
    padding: 15px;
  }

  .title {
    background: green;
  }

  .type {
    background-color: red;
  }

  .locale {
    background: black;
  }
}


With the use of variables, I only need to make 2 adjustments and everything is recalculated for me. Since the padding on the child elements and the margin on the parent element is not using the variables, I know that I am free to change them without it affecting the corners.

I am almost certain you mean "locale" for your class name, not "local".

If your CSS goes away, does your content still make sense? If not, then you may need something more to give it some context. A table may be appropriate here.

If you ever have a class called "title", that's almost a sure sign that you should be using an h1-h6 element instead.

Code Snippets

<div class="module-wrapper">
  <div class="title">Jump Session Outdoor Editon</div>    
  <div class="type">Party</div>
  <div class="locale">London</div>
</div>
.module-wrapper {
  width: 20%;
  margin: 40px auto;
  padding: 10px 0;
  color: white;
  text-align: center;
}
.module-wrapper:before, .module-wrapper:after {
  content: '';
  display: block;
  height: 10px;
}
.module-wrapper > :first-child, .module-wrapper > :last-child {
  position: relative;
}
.module-wrapper > :first-child:before, .module-wrapper > :last-child:after {
  content: '';
  display: block;
  background-color: inherit;
  height: 10px;
  position: absolute;
  left: 10px;
  right: 10px;
}
.module-wrapper > :first-child:before {
  top: -10px;
}
.module-wrapper > :last-child:after {
  bottom: -10px;
}
.module-wrapper div {
  padding: 15px;
}
.module-wrapper .title {
  background: green;
}
.module-wrapper .type {
  background-color: red;
}
.module-wrapper .locale {
  background: black;
}
$corner-width: 10px;
$corner-height: 10px;

.module-wrapper {
  width: 20%;
  margin: 40px auto;
  padding: 10px 0;
  color: white;
  text-align: center;

  // the pseudo elements here prevent us from having
  // to do the math on the parent element's margin
  // to ensure there's no overlap from preceding/
  // following elements
  &:before, &:after {
    content: '';
    display: block;
    height: $corner-height;
  }

  > :first-child, > :last-child {
    position: relative;
  }

  // this is where the illusion of the "corner"
  // happens
  > :first-child:before, > :last-child:after {
    content: '';
    display: block;
    background-color: inherit;
    height: $corner-height;
    position: absolute;
    left: $corner-width;
    right: $corner-width;
  }

  > :first-child:before {
    top: -$corner-height;
  }

  > :last-child:after {
    bottom: -$corner-height;
  }

  // pretty up our child elements
  div {
    padding: 15px;
  }

  .title {
    background: green;
  }

  .type {
    background-color: red;
  }

  .locale {
    background: black;
  }
}

Context

StackExchange Code Review Q#63655, answer score: 2

Revisions (0)

No revisions yet.