Issue
I guess I may be missing something really simple. I wanted to create something like below:
Here's what I've tried following the answer from one of the ques on StackOverflow, but I can't that ques again.
.blockHead:after {
color:#4D81BF;
border-left: 20px solid;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
}
.blockHead {
background-color:#4D81BF;
/*width: 150px; */
height: 40px;
display: inline-block;
position: relative;
}
.blocktext{
color:white;
font-weight:bold;
padding-left:10px;
font-family:Arial;
font-size:11;
}
<div class="blockHead"><span class="blocktext">ABC Team</span></div>
The prob is that the text appears right at the top of the div. I want it middle aligned in reference to the Div block.
Please, any help on this would be really appreciated.
Thanks in advance!
Solution
It's just a matter of setting the line-height
to be the same as the height
Also, you should align the arrow head to the top.
.blockHead {
background-color: #4D81BF;
/*width: 150px; */
height: 40px;
line-height: 40px;
display: inline-block;
position: relative;
}
.blockHead:after {
color: #4D81BF;
border-left: 20px solid;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
top:0
}
.blockHead:after {
color: #4D81BF;
border-left: 20px solid;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
top: 0;
}
.blockHead {
background-color: #4D81BF;
/*width: 150px; */
height: 40px;
line-height: 40px;
display: inline-block;
position: relative;
}
.blocktext {
color: white;
font-weight: bold;
padding-left: 10px;
font-family: Arial;
font-size: 11;
}
<div class="blockHead"><span class="blocktext">ABC Team</span>
</div>
Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.