CODEWITHSUNDEEP
htmlcsscss-shapes
Gopikrishna
Gopikrishna

Reputation: 857

How to do the below mentioned shape in css

I need a weird shaped div and I've read around the web for shaping divs but I haven't found what I need :

Please note: It can't be just a border, as there is supposed to be text inside it.

Upvotes: 1

Views: 116

Answers (5)

Abhroo
Abhroo

Reputation: 126

Please use this code for getting the shape you want:

<span style="display: inline-block; width: 20em; height: 20em">
  <span style="position: relative; display: inline-block; width: 20em; height: 20em">
    <i style="position: absolute;display:inline-block;width:14.6em;height:5.4em;background-color:#007BFF;left:0em;top:0em"></i>
    <i style="position: absolute;display:inline-block;width:0;height:0;line-height:0;border:2.7em solid transparent;border-left:2.7em solid #007BFF;border-top:2.7em solid #007BFF;left:14.6em;top:0em"></i>
  </span>
</span>

Upvotes: -1

Kheema Pandey
Kheema Pandey

Reputation: 10265

you can achieve this effect by using linear-gradient.

Have a look at the DEMO First.

div{
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 2em;
  color:#ffffff;
  background: linear-gradient(-250deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
  text-align:center;
}

Upvotes: 2

web-tiki
web-tiki

Reputation: 103780

You can use skewX() and a pseudo element to make a your shape responsive :

DEMO

HTML :

<div>TEST</div>

CSS :

div{
    line-height:50px;
    color:#fff;
    text-align:center;
    background:#344769;
    width:20%;
    position:relative;
}
div:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    background:#344769;
    z-index:-1;

    -ms-transform-origin: 0 100%;
-webkit-transform-origin:0 100%;
transform-origin:  0 100% ;

    -ms-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
transform:  skewX(-30deg) ;
}

Upvotes: 3

Shishir
Shishir

Reputation: 2546

You can use the :after pseudo-element in css to achieve this.

I've created a jsFiddle to demonstrate this: http://jsfiddle.net/49BRA/

CSS:

div {
    display: block;
    width: 200px;
    height: 50px;
    background-color: #CCC;
    margin: 0;
    padding: 0;
    line-height: 1em;
    position: relative;

    font-size: 2em;
    line-height: 50px;
    text-align: center;
}

div:after {
    display: inline-block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #CCC;
    border-bottom: 25px solid transparent;
    border-right: 25px solid transparent;
    position: absolute;
    right: -50px;
}

HTML: 

<div>TEST</div>

I hope this works for you.

Cheers!

Upvotes: 1

Arseni Mourzenko
Arseni Mourzenko

Reputation: 52321

If you want to have a really custom shape, you may have a better try with SVG shapes. It allows you to draw polygons, and is used, for example, to display maps on some websites.

As for the illustration you added after editing your answer, you may want to play simply with triangles by separating your shape into the rectangle with text and a triangle on the right.

Example (see also on JsFiddle):

enter image description here

HTML:

<div class="shape">
    <span class="text">Test</span>
    <span class="triangle"></span>
</div>

CSS:

.shape {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}

.text {
    background: navy;
    color: white;
    float: left;
    padding-left: 20px;
    text-align: center;
    width: 150px;
}

.triangle {
    float: left;
    height: 0;
    width: 0;
    margin-top: -40px;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid navy;
}

Upvotes: 2

Related Questions