Menu
I'm trying to achieve a tapered <div> tag. That is, a slant edge on one side (slanting inwards) and a straight edge on all the other 3 sides.
I'm not sure if it is possible using CSS and HTML alone. I've tried Googling this problem, but could not find any solution to it.
I've tried:
-webkit-border-bottom-right-radius : 50px 650px;
where 650px is the whole height if my div. But this gives me a rounded corner for the bottom right position, which I don't want. Hope you guys know the answer to this problem, or at least suggest an alternative to this.
556
This can be achieved with transparent border!
CSS
#test1 {
border-top: 100px solid red;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
width: 300px;
}
#test2 {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
#test3 {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 100px;
width: 100px;
content: 'ds';
z-index: -1; /* make it the background */
}
#test3 .content {
position: relative;
top: -100px;
margin: 5px;
float: left; /* wrap the text */
clear: left; /* for demo */
font-size: 1em;
background-color: cyan;
}
HTML
<body>
<div id="test1">
</div>
<br/>
<div id="test2">
</div>
<br/>
<div id="test3">
<div class="content">
Watch for the<br>
new lines. <br>
Do not overlap.
</div>
</div>
</body>
Looks like CSS regions might http://www.adobe.com/devnet/html5/articles/css3-regions.html (scroll down to the section entitled "Wrap shape"). You could define the shape as a polygon and you're set! Unfortunately, shaped region support is currently limited, but depending on your use case, it might work.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
