Below is code for downward arrow. I am trying to make it to upward but no success till now.
Can anyone help me with this?
.line {
width: 70%;
}
.line:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 45%;
}
.line:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 45%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr class="line">
</body>
</html>
I just wanted to show the upward arrow between the hr tag.
https://www.w3schools.com/code/tryit.asp?filename=FG5LJQ77HPXS
There it is, you should just play a little bit with border-width and then correct the topand left position
Arrow Up
.up {
width: 70%;
}
.up:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: white transparent;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.up:before {
content: '';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 2px;
left: 45%;
}
<div class="up"></div>
Arrow Left
.up {
width: 70%;
}
.up:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 7px 0px;
border-color: transparent white;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.up:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 7px 0px;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 44.8%;
}
<div class="up"></div>
Arrow Right
.up {
width: 70%;
}
.up:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 0px 7px 7px;
border-color: transparent white;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.up:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 0px 7px 7px;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45.1%;
}
<div class="up"></div>
Arrow Down
.up {
width: 70%;
}
.up:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 0px 7px;
border-color: white transparent;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.up:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 7px 0px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 4px;
left: 45%;
}
<div class="up"></div>
Working solution
.line {
width: 70%;
}
.line:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.line:before {
content: '';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 2px;
left: 45%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr class="line">
</body>
</html>
To have the up arrow use this code
.line {
width:70%;
}
.line:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 2px;
left: 45%;
}
.line:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 1px;
left: 45%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<hr class="line">
</body>
</html>
tried with your code, and finally i did it..try my code..!
<!DOCTYPE html>
<html>
<head>
<style>
.line {
width:70%;
}
.line::before {
border-color: #7f7f7f transparent;
border-style: solid;
border-width: 0 7px 7px;
content: "";
display: block;
left: 45%;
position: absolute;
top: 2px;
width: 0;
z-index: 1;
}
.line::after {
border-color: #ffffff transparent;
border-style: solid;
border-width: 0 7px 7px;
content: "";
display: block;
left: 45%;
position: absolute;
top: 3px;
width: 0;
z-index: 1;
}
</style>
</head>
<body>
<hr class="line">
</body>
</html>
Do you mean it like that?
.line {
position: relative;
width: 70%;
}
.line:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -6px;
left: 45%;
}
.line:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0px 7px 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: -7px;
left: 45%;
}
First we make an upward arrow by changing the :after and :before 's border-width from 0 7px 7px to 7px 7px 0. Then we updated the top position so it will fit in the hr element :)
.line {
width:70%;
}
.line:after {
content:'';
position: absolute;
border-style: solid;
border-width: 0 7px 7px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 3px;
left: 45%;
}
.line:before {
content:'';
position: absolute;
border-style: solid;
border-width: 0 7px 7px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 2px;
left: 45%;
}
<hr class="line">
Related
I was able to get a single triangle in the top right corner of my div by following this question and answer:
Top Right triangle in Div.
My question is how do I get another triangle in the top left as well? When I add code for the second triangle, my div comes out all messed up.
Here's what I tried.
/*TopRight (if you comment out all .TopRightTriangle you will get the TopLeft working correctly)*/
.topRightTriangle {
width: 10em;
height: 6em;
position: relative;
}
.topRightTriangle::before,
.topRightTriangle::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.topRightTriangle::before {
border-width: 0.6em;
border-right-color: #ccc;
border-top-color: #ccc;
}
.topRightTriangle::after {
border-width: 0.5em;
border-right-color: #000;
border-top-color: #000;
}
/*TopLeft (if you comment out all .TopLeftTriangle you will get the TopRight working correctly)*/
.TopLeftTriangle {
width: 10em;
height: 6em;
position: relative;
}
.TopLeftTriangle::before,
.TopLeftTriangle::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.TopLeftTriangle::before {
border-width: 0.6em;
border-left-color: #ccc;
border-top-color: #ccc;
}
.TopLeftTriangle::after {
border-width: 0.5em;
border-left-color: red;
border-top-color: red;
}
<div class="topRightTriangle topLeftTriangle"></div>
This is how the endDiv should look like
What about an easy way with less of code and linear-gradient:
.element {
width:300px;
height:100px;
background:
linear-gradient(to bottom left, red 50%,transparent 50%) 100% 0/50px 50px,
linear-gradient(to bottom right, green 50%,transparent 50%) 0 0/50px 50px,
linear-gradient(to bottom right, brown 50%,transparent 50%) 0 0/60px 60px,
linear-gradient(to bottom left, pink 50%,transparent 50%) 100% 0/60px 60px,
orange;
background-repeat:no-repeat;
text-align:center;
color:#fff;
font-size:40px;
}
<div class="element"> A </div>
I believe multiple before and after elements are not possible, so think you need to make an extra element overlaying. Sort of like this, but maybe it's not usable for your case? Hope it helps, sorry if it is not usable for you.
/*TopRight*/
.topRightTriangle {
width: 10em;
height: 6em;
position: relative;
}
.topRightTriangle::before,
.topRightTriangle::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.topRightTriangle::before,
.topRightTriangle::before {
border-width: 0.6em;
border-right-color: #ccc;
border-top-color: #ccc;
}
.topRightTriangle::after,
.topRightTriangle::after {
border-width: 0.5em;
border-right-color: #000;
border-top-color: #000;
}
/*TopLeft*/
.TopLeftTriangle {
width: 10em;
height: 6em;
position: relative;
}
.TopLeftTriangle::before,
.TopLeftTriangle::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.TopLeftTriangle::before {
border-width: 0.6em;
border-left-color: #ccc;
border-top-color: #ccc;
}
.TopLeftTriangle::after {
border-width: 0.5em;
border-left-color: red;
border-top-color: red;
}
<div class="topRightTriangle TopLeftTriangle"></div>
/*TopRight*/
.topRightTriangle {
width: 10em;
height: 6em;
position: relative;
}
.topRightTriangle::before,
.topRightTriangle::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-color: transparent;
border-style: solid;
}
.topRightTriangle::before,
.topRightTriangle::before {
border-width: 0.6em;
border-right-color: #ccc;
border-top-color: #ccc;
}
.topRightTriangle::after,
.topRightTriangle::after {
border-width: 0.5em;
border-right-color: #000;
border-top-color: #000;
}
/*TopLeft*/
.TopLeftTriangle {
width: 10em;
height: 6em;
position: relative;
}
.TopLeftTriangle::before,
.TopLeftTriangle::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.TopLeftTriangle::before {
border-width: 0.6em;
border-left-color: #ccc;
border-top-color: #ccc;
}
.TopLeftTriangle::after {
border-width: 0.5em;
border-left-color: red;
border-top-color: red;
}
<div class="topRightTriangle"><span class="TopLeftTriangle"></span></div>
Is something like this that you want?
.myDiv {
position: relative;
width: 100px;
height: 100px;
background: red;
}
.myDiv:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 10px solid gray;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid gray;
}
.myDiv:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-top: 10px solid gray;
border-right: 10px solid gray;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
<div class="myDiv"></div>
Same effect slightly less CSS
HTML:
<div class="topRightTriangle"><div class="triangle-bg"></div></div>
CSS:
.topRightTriangle {
width: 10em;
height: 6em;
position: relative;
background: orange;
overflow:hidden;
}
.topRightTriangle:after, .topRightTriangle:before {
content: '\25b2';
font-size:20px;
position: absolute;
top: -12px;
border-color: transparent;
border-style: solid;
z-index:1;
}
.topRightTriangle:before {
color:red;
left: -4.5px;
transform: rotate(97deg) skewX(33deg) skewY(-8deg) scale(1.2) translate(-1px,0px)
}
.topRightTriangle:after {
color:black;
right: -3.5px;
transform: rotate(-97deg) skewX(-33deg) skewY(8deg) scale(1.2) translate(1px,0px)
}
.triangle-bg:before, .triangle-bg:after {
content: '';
position: absolute;
top: 0;
border: transparent solid;
}
.triangle-bg:before {
border-width: 0.6em;
border-left-color: #ccc;
border-top-color: #ccc;
left:0;
}
.triangle-bg:after {
right:0;
border-width: 0.6em;
border-right-color: #ccc;
border-top-color: #ccc;
}
Working on a chat bubble:
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
<div class="bubble"></div>
The onhover is currently not working for the caret part of the chat bubble. The desired result is obviously the whole chat bubble being filled up when there is an onhover event. I tried (not a CSS wiz):
.bubble:hover, .bubble:hover:before, .bubble:hover:after{
background-color: red;
}
I also tried a lot of different stuff but it doesn't seem to work. How do I fix this?
You just have to add
.bubble:hover:after {
border-color: red transparent;
}
because the small triangle is actually the border of the :after element.
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border: rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
.bubble:hover:after {
border-color: red transparent;
}
<div class="bubble"></div>
Maybe simply this:
.bubble:hover::after {
border-color: red transparent;
}
.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:rgb(107, 107, 107) solid 2px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218) transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}
.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}
.bubble:hover {
background-color: red;
}
.bubble:hover::after {
border-color: red transparent;
}
<div class="bubble"></div>
I am trying to draw a line with a small arrow pointing down as in the image attached.
I was able to get it working on fiddle using before and after psuedo tags ( with help from Stack overflow).
<hr class="line">
http://jsfiddle.net/4eL39sm1/6/
But I now need it in a div tag like this
<div class="hr"></div>
I have edited my css accordingly
div.hr{
width:70%;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 45%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 45%;
}
I made these 2 observations:
The arrow part looks a solid triangle.
The arrow (triangle was mispalced was up in the top). I removed the top value form css and it aligned well but it still looks like a triangle.
Is there a way I can fix this?
Thanks.
You can modify to this:
div.hr {
width:70%;
height: 1px;
background: #7F7F7F;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 35%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 35%;
}
<div class="hr"></div>
As you can see you don't have to remove top from pseudo-elements. The only thing you have to add is height: 1px and background color same as the second triangle.
Also if you wan to use it inside another element for example and align to center you can use this:
div.hr {
width:70%;
height: 1px;
background: #7F7F7F;
position: relative;
margin: 0 auto;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
left: 50%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
left: 50%;
}
<div>
<div class="hr"></div>
</div>
p.s. By the way i was the person who answered in your first post :)
After conversation with #user3861559 i created an approach for his situation. Instead of pseudo-elements I use nested divs with the same result:
div.hr {
width:70%;
height: 1px;
background: #7F7F7F;
}
div.after {
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 35%;
}
div.before {
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 35%;
}
<div class="hr">
<div class="before"></div>
<div class="after"></div>
</div>
I have the following CSS that creates a blue speech bubble (JS fiddle: http://jsfiddle.net/C5N2c/:
<div class="bubble">Content</div>
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
I want to add a 1px red border around the edge of this bubble, including the small speech arrow. How can I do this? It needs to be IE8 compliant.
Take a look a this Fiddle, though I havent been able to test in IE8..
The CSS:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: red solid 1px;
z-index:2;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 9px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -9px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 12px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -12px;
left: 24px;
}
See working version on jsFidde
I did it sometime ago, you can just change the colours, It's not tested on IE, I am currently on OSX and it's a mess trying to view it on IE xD
html:
<div class="dialog">
<div class="triangleOutline">
<div class="triangle"></div>
</div>
<div class="dialogBox">
Hello!<br>
I'm a full CSS fancy dialog box :D
</div>
</div>
css:
body{
font-size: 100%;
font-family: "Arimo";
background: #eee;
}
.triangle,
.triangleOutline{
position:relative;
width: 0;
height: 0;
border: solid transparent;
border-width: 7px;
border-bottom-color: #aaf;
}
.triangleOutline{left: 15px;}
.triangle{
top: -6px; /* outline's width - 1 */
left: -7px; /* outline's width */
border-bottom-color: white;
}
.dialogBox{
background: white;
border: 1px solid #aaf;
padding: 0.75em;
border-radius: 3px;
min-height: 1.5em;
line-height: 1.5em;
}
Just change the colors as you like, I guess you are not using THOSE colors right? XD
Try this code:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
box-shadow: 0 0 0 1px red;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -19px;
left: 21px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
See this jsfiddle.
I want to create a ribbon effect like on this image (the red part of image):
When I try to create an arrow effect with borders, the shape of object is completely destroyed:
HTML code:
Kategorija
CSS code so far (without trying to create the arrow):
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
box-shadow: 0px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
Any idea how can I create this?
Made a fiddle here. Couldn't solve it without a b tag though. I used b because it is so small
HTML
Kategorija<b></b>
CSS
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
box-shadow: 3px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #760000 transparent transparent #760000 ;
}
.mali_oglas_kategorija b {
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #760000 #760000 ;
}
body { padding: 50px;}
you could also use a skewed element if this was required for hit-testing as well.
Something like:
.rib {
margin-left: 20px;
height: 40px;
width: 200px;
position: relative;
background: gray;
color: white;
line-height: 40px;
text-align: center;
}
.rib:before,
.rib:after {
content: "";
position: absolute;
right: -10px;
top: 0;
height: 50%;
width: 40px;
background: inherit;
}
.rib:before {
transform: skewX(-45deg);
}
.rib:after {
transform: skewX(45deg);
top: 50%;
}
.shad {
position: absolute;
height: 40px;
width: 20px;
top: 0%;
left: 0;
background: dimgray;
transform-origin: top left;
transform: skewY(45deg);
z-index: -1;
box-shadow:inset 0 0 10px black;
}
<div class="rib">123
<div class="shad">
</div>
</div>