Issue
How can I inherit the background color from the div above instead of the font color? I have a white background so the the :after won't be visible.
<div class="drupes">
<h1>Web-Only</h1>
</div>
div {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
z-index: 10;
position: absolute;
top: 0;
left: 0;
display: inline-block;
color: black;
background-color: #f65e3f;
padding-right: 60px;
padding-left: 60px;
padding-top:30px;
padding-bottom:30px;
}
.drupes:after {
content: '';
position: absolute;
top: 0;
left: 100%;
display: inline-block;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-bottom: 140px solid transparent;
border-left-color: inherit;
}
Probably I am missing something very simple but I just can't figure it out.
Tried to make the div the parent but it would still take the font color
https://jsfiddle.net/732rc5bh/
Solution
border-left-color: inherit;
: You are not inheriting from background color, but from border color. And default border color is black.
Set parent element border color to match background color
div {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
z-index: 10;
position: absolute;
top: 0;
left: 0;
display: inline-block;
color: black;
background-color: #f65e3f;
border-color: #f65e3f; /* Added code */
padding-right: 60px;
padding-left: 60px;
padding-top:30px;
padding-bottom:30px;
}
.drupes:after {
content: '';
position: absolute;
top: 0;
left: 100%;
display: inline-block;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-bottom: 140px solid transparent;
border-left-color: inherit;
}
<div class="drupes">
<h1>Web-Only</h1>
</div>
Answered By - Justinas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.