How to create a custom shape - css


Tags: html,css,css-shapes

Problem :

I would like to create a custom shape like this image :

enter image description here

how can I do ?

My CSS :

#chevron { 
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px; 
  width: 200px; }

#chevron:before { 
  content: ''; 
  position: absolute;
  top: 0; 
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);    -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg); }

#chevron:after { 
  content: ''; 
  position: absolute;
  top: 0; 
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }

My HTML file :

<div id="chevron">

</div>

But my result isn't what I want :

enter image description here



Solution :

  • Add the background color to the parent div to fill in the gap
  • Place the border-radius on the parent div to create the two rounded corners
  • Move the :before and :after down slightly with top: 20px so they don't peak out the top of the div

Example

Here is a fiddle of the below:

#chevron {
  width: 350px;
  height: 100px;
  background: #337AB7;
  border-radius: 10px 10px 0 0;
  position: relative;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 20px;
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}
<div id="chevron"></div>


    CSS Howto..

    How to change width to fill the remaining space (CSS)

    How bad is to store all background images in CSS?

    How to use custom field to add class to a post?

    How to use grunt sass to compile and compress scss to css?

    CSS to keep middle image in 100% width slideshow always in center

    How to edit mobile CSS in SocialEngine?

    How to give different style, color to dotted border of links?

    How to route requests in codeigniter so we can serve static css, js and img files?

    How to make hover gradient on a div element like on Wella.com?

    How can I size these spans so that the pictures don't extend past them?

    How to make hover css menu fade in and out?

    How to change CSS in media tag within @media only tags with jquery?

    How to automatically scroll when div expands at bottom of page?

    How to change div border automatically when more children are added to it

    How to queue CSS3 animations when shown after page scroll (JSFiddle provided)

    How to keep a div's height 100%?

    How to Style Social Media Links Correctly

    JSP/HTML / JS / CSS - How to create a cancel button in form

    How Do I Make Large Quotation Marks Wrap Properly Around Quotations?

    How to use CSS transition effects

    jquery css how to retain position if you remove margin

    How do I inspect CSS pseudo classes with firebug?

    CSS question - transparent underlined textbox - howto?

    How to hide and fade div using jquery and css

    How to fix transparent div child in parent?

    How to show a background color over the full width when zooming in?

    How to use jQuery to set min-height the same as window

    How do I target only elements that are followed by another (specific) element?

    How does one change the colour of a div based on current time?

    CSS stylesheets at top or bottom? or How to solve blank page issue?