Menu
I want to style an html div to be like a rocket, I mean it should represented as an oblong with a triangle edge. Just like this screenshot:-
907
CSS Based Approaches:Create a layer with ::before OR ::after pseudo element having width and height more than its parent. Add border-radius to create the rounded shape. Add overflow: hidden on parent to hide the unnecessary part.
Using CSS position property: The position: absolute; property is used to position any element at the absolute position and this property can be used to stack elements on top of each other. Using this, any element can be positioned anywhere regardless of the position of other elements.
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
A pure CSS solution could make use of the :after pseudoselector and abusing borders to make triangles. This site will even generate the code for you:
http://cssarrowplease.com/
Set the position to right and the size to be the height of the div.
72
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
