In this tutorial we will show you the solution of CSS shapes with text inside, as we know css used to style html elements, here we used internal style method to show demo.
We can create any shape in html and css here we will make square and triangle shape with respective shape name on it.
Here we used border style to create triangle shape and square we can make easily with just ‘width and height’ style property but we don’t have inbuilt method to make any shapes in html.
Step By Step Guide On CSS Shapes With Text Inside :-
We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
In our program we defined two <div> tags with attributes of classes with value ‘tri,sqaure’ and within that we defined two para <p> tag with attribute classes of ‘t,sq’ and texts.
Using them we defined some block of styles with property ‘border-bottom’ value ‘100px solid #555’ none of them we needs to make left and right side border to be ‘transparent’ then only we can get triangle shape and for square shape we just define width and height of div to be equal size that’s all.
<!DOCTYPE html>
<html>
<head>
<title>CSS SHAPES</title>
<style>
.tri{
width: 0;
height: 0;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
border-bottom: 100px solid #555;
}
.square{
width: 50px;
height: 50px;
background-color: green;
position: absolute;
margin-left: 20%;
}
.sq{
text-align: center;
}
.t{
position: absolute;
margin-top: 40px;
margin-left: -22px;
}
</style>
</head>
<body>
<div class="tri"><p class="t">Triangle</p></div>
<div class="square"><p class="sq">Square</p></div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Within <style> tag we defined block of styles. We created triangle shape by styles ‘width and height’ value to ‘0’, right and left side border to ‘65px thickness, solid border style,color to be transparent’ and bottom of border to be ‘100px width, solid border style, grey color’.
- Finally we gets triangle shape. Using class ‘t’ we can display text on triangle shape and for that we defined styles of ‘position:absolute’ makes text to be sticks on shape, for align that text to center of shape we defined ‘margin-top: 40px; and margin-left: -22px;’.
- For creates square shape we used class ‘.square’ within that we defined width and height to be same size so it’s ‘50px’, ‘position:absolute’ is must because without this empty div will show up on display. When we fills them with text so it will show up but it is not properly make shape because lack of text width.
- After that we sets ‘background-color’ to ‘green’ and ‘margin-left’ property to ‘20%’ makes available square shape after particular space.
- In class ‘.sq’ we defined ‘text-align’ property to value ‘center’ so we can move text to the center area of shape.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here two <div> tags we defined with some classes ‘tri,square’ and also we puts ‘triangle,square’ texts on between <div> tag then its styled by as we seen at point 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to make shapes with text on that in css.
When we load our program we can see triangle with grey background color and square shape with green color background with respective shape texts on that and also we can make any size triangle and square with any background color.
This concept will useful when we needs to design our website or make any animations we needs to know aware of this and we can also make any shapes using css later will see about them.
I hope this tutorial on CSS shapes with text inside helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
