How to create a pointed top div with CSS
I see a lot of related streams that mostly suggest CSS triangles in :: after or :: before pseudos, but none of them really output. I am throwing this to see if anyone has any ideas.
I am looking to create a pointed or herd-top div that still maintains a uniform border and box-shadow with the rest of the div.
See link for a picture of what I am trying to create:
+3
source to share
2 answers
If you don't want to use an image, you can do something like this. But working with the image is much easier in this case.
body {
background-color: #CCC;
}
.wrapper {
}
.outer {
width: 0;
height: 0;
border-style: solid;
border-width: 0 205px 32px 205px;
border-color: transparent transparent #ffffff transparent;
position: absolute;
}
.inner {
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 32px 200px;
border-color: transparent transparent #ea2225 transparent;
margin-left: -200px;
margin-top: 5px;
position: absolute;
}
.fix {
background-color: #FFF;
height: 10px;
width: 410px;
position: absolute;
margin-top: 32px;
}
.red {
width: 396px;
height: 300px;
background-color: #ea2225;
margin-top: 37px;
position: absolute;
border-left: 7px solid #FFF;
border-right: 7px solid #FFF;
border-bottom: 6px solid #FFF;
-webkit-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
-moz-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
}
<div class="wrapper">
<div class="fix"></div>
<div class="outer">
<div class="inner">
</div>
</div>
</div>
<div class="red"></div>
+2
source to share
this should start:
Update
This is an updated violin that is much better represented.
.first {
display: inline-block;
width: 3em;
height: 3em
}
.second {
position: relative;
display: inline-block;
width: 3em;
height: 3em
}
.third {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid transparent;
margin-top: -1em;
border-bottom: 1em solid #007BFF;
left: 0em;
top: 0em
}
.forth {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid #007BFF;
border-bottom: 1.5em solid #007BFF;
left: 0em;
top: 1.5em
}
<span class="first"><span class="second"><i class="third"></i><i class="forth"></i></span></span>
+1
source to share