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.
-
I wrote something you could adapt. Check last example in this page: miguel-svq.com/textwrap.html That's what you want? (Maybe adding some color to the image, not just white). If it is valid for you tell me and I'll write "the long answer".miguel-svq– miguel-svq2014-05-30 12:27:19 +00:00Commented May 30, 2014 at 12:27
-
You actually need text inside the END triangle ?Paulie_D– Paulie_D2014-05-30 12:33:07 +00:00Commented May 30, 2014 at 12:33
Add a comment
|
5 Answers
You can use skewX() and a pseudo element to make a your shape responsive :
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) ;
}
Comments
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):
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;
}
answered May 30, 2014 at 12:22
Arseni Mourzenko
52.7k35 gold badges119 silver badges213 bronze badges
Comments
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;
}
1 Comment
Kheema Pandey
seems this solution is not prefered.
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!
Comments
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>
