I created a div tag with long text, so i decided to use overflow-y:auto; but applying this eats away my css properties like upper triangle, and glow effect in MY BROWSER.
view fiddle, http://jsfiddle.net/SFVC3/
.message_box {
position: absolute;
top:80px;
right:5px;
width: 350px;
height: auto;
padding: 10px;
background:#fff;
visibility: hidden;
max-height:400px;
overflow-y:auto;
border:solid 1px #719ECE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
-moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8);
filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
z-index:9999;
}
.message_box:after, .message_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.message_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 9px;
right: 10%;
margin-right: -9px;
}
.message_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 10px;
right: 10%;
margin-right: -10px;
}
Related
I have a div tag and I added one triangle on the div box. How do I add a second triangle?
I want to have 2 triangles, one for best and one for worst that will work on most browsers.
JSFiddle
.arrow_box {
top: 40px;
position: relative;
background: #ffffff;
border: 1px solid #719ECE;
width: 200px;
height: 22px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
-moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 19px;
left: 70%;
margin-left: -19px;
}
.arrow_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 20px;
left: 70%;
margin-left: -20px;
}
<div id="nicebox" class="arrow_box">
<span class="pull-left">Best </span>
<span class="pull-right">Worst</span>
</div>
Here is the updated Demo
.arrow_box {
top:40px;
position: relative;
background: #ffffff;
border: 1px solid #719ECE;
width: 200px;
height: 22px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
-moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8);
filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #719ECE;
border-width: 19px;
right: 0%;
/* margin-left: -10px; */
}
.arrow_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 20px;
left: 10%;
margin-left: -20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<div id="nicebox" class="arrow_box">
<span class="pull-left"><i class="fa fa-long-arrow-up" aria-hidden="true"></i>Best </span>
<span class="pull-right">Worst</span>
</div>
I am trying to create an element using Bootstrap that looks like this image
This is the screen shot of how far I have gone
I have never worked on pseudo classes and am finding it very difficult to get the exact shape. Please take a look at my code and help me figure it out. I have included only the second (thee one on the right side in the screenshot) clipboard's code here.
HTML
<div class="col-xs-12 col-sm-6">
<div class="clip">
<div class="circle"></div>
</div>
<div class="pad">
<div class="paper"></div>
</div>
</div>
CSS
.clip, .circle{
position: relative;
}
.clip::after, .clip::before, circle:after, .circle:before{
display: block;
position: absolute;
content: "";
z-index: 50;
}
.clip:before{
top: 12.5px;
left: 15%;
width: 70%;
border-bottom: solid 50px grey;
border-left: solid 150px transparent;
border-right: solid 150px transparent;
}
.clip:after{
top: 60px;
left: 15%;
width: 70%;
border-bottom: solid 55px grey;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.circle:before{
top: 10px;
left: 70%;
width: 20%;
height: 50px;
border-radius: 50%;
border-right: solid 150px yellow;
}
because there is no SVG tag, i'll go with pseudo & gradient :
div {
position:relative;
float:left;
margin:60px 60px 80px;
width:180px;
height:200px;
border-radius:15px;
background:white;
box-shadow:/* draw inside part of border */0 0 0 20px #159E91, inset -1px -1px 1px;
}
div:before {/*to draw outside part of border with same radius inside/out */
z-index:-1;
border-radius:20px;
content:'';
border: 20px solid #159E91;
position:absolute;
top:-30px;
left:-30px;
right:-30px;
bottom:-30px;
box-shadow:0 -2px 2px rgba(30, 162, 149, 0.2), 0 0 2px white, 0 5px 5px -3px rgba(0,0,0,0.5)
}
div:after {/* draw gradient underneath clipper */
content:'';
position:absolute;
top:0;
border-radius: 0 15px 0 0;
left:26px;
width:152px;
height:150px;
background:
linear-gradient(45deg, white 40%, rgba(255,255,255,0) 40% ),/* mask*/
linear-gradient(-45deg, white , transparent 70%),/* mask*/
linear-gradient(to right , rgba(0,0,0,0.25) , rgba(0,0,0,0.15)),transparent ;
}
.clipper {/* hold clipper shape actually */
display:block;
width:128px;
height:80px;
margin: -52px auto 30px;
position:relative;
z-index:1;
overflow:hidden;
}
.clipper b {/* show the clipper shape */
border-radius:35px;
position:absolute;
height:150%;
width:100%;
box-shadow: 0 0 1px 1px gray;
left:50%;
top:-12px;
transform-origin:0 0;
transform:rotate(45deg);
overflow:hidden;
}
.clipper b:before {/* draw the hoe and paint around it */
content:'';
display:block;
border-radius:100%;
height:29px;
width:29px;
margin:20px;
box-shadow:inset -1px -1px 1px gray, 0 0 0 100px #3B3B3B, inset 1px 1px 2px rgba(0,0,0,0.5);
}
/* to match fake picture's text */
.clipper ~ span {
display:block;
background:#353535;
margin:10px 58px;
padding:5px;
position:relative;
z-index:1;
}
.clipper ~ span:last-of-type {
display:block;
background:#353535;
margin:10px 85px 10px 58px;
}
<div>
<span class="clipper"><b></b></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
but that's really much CSS for just a shape, where an image or an SVG would do fine for the design.
You can play with it here : http://codepen.io/gc-nomade/pen/rLYYZx
https://jsfiddle.net/ahe128/esmrLzuv/5/
i did something but this is realy hard work i will try complete this :)
.clip,
.circle {
position: relative;
}
.clip::after,
.clip::before,
circle:after,
.circle:before {
display: block;
position: absolute;
content: "";
z-index: 50;
}
.clip:before {
top: 1rem;
left: 10%;
width: 20%;
border-bottom: solid 50px grey;
border-left: solid 150px transparent;
border-right: solid 150px transparent;
}
.clip:after {
top: 4.65rem;
left: 10%;
right:10%;
width: 82%;
border-bottom: solid 4.3rem grey;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
border-bottom-left-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
}
.circle:before {
top: 0.78rem;
height: 1px;
width:1px;
border-radius: 50%;
border: solid 25px white;
z-index:100;
left:47%
}
Finally.......I got it working (except the diagonal gradient). But it's not responsive yet. My aim is to keep each Clipboard's design intact and stack them one below the other in small screens. Can someone please point out where I'm missing it !!
Also, if there's a better way of doing it in Pure CSS then I'd love to see it.
Fiddle: https://jsfiddle.net/chandannadig/esmrLzuv/7/
/*Clip*/
.clip, .circle{
position: relative;
}
.clip::after, .clip::before, circle:after, .circle:before{
display: block;
position: absolute;
content: "";
}
.clip:before{
z-index: 50;
top: 1rem;
left: 6.958rem;
width: 29rem;
border-bottom: solid 4rem grey;
border-left: solid 11.5rem transparent;
border-right: solid 11.5rem transparent;
}
.clip:after{
top: 4.7rem;
left: 6.958rem;
width: 29rem;
z-index: 50;
border-bottom: solid 4rem grey;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.circle{
position: absolute;
z-index: 60;
top: 0.4rem;
left: 15.6rem;
width: 12rem;
height: 8rem;
background: grey;
border-radius: 50%;
}
.circle::before{
z-index: 60;
top: 1rem;
left: 4.2rem;
width: 3.5rem;
height: 3.5rem;
background: white;
border-radius: 50%;
}
/*End of Clip*/
I'm trying to create the following tooltip (not the contents within - just the box & arrow):
I'm having an issue getting the arrow to blend in correctly with the main box.
I created a Fiddle here with the code I have so far.
You will notice the arrow looks ok but just doesn't fit in 100%, I'm not sure how to finish it.
Below is the arrow code:
.arrow_box:after, .arrow_box:before {
border: 11px solid;
border-color: inherit;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom: 100%;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #f3f3f3;
border-width: 13px;
margin-left: -23px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #e1e1e1;
border-width: 15px;
margin-left: -25px;
}
http://jsfiddle.net/9uppsLqa/5/
.arrow_box {
border-radius: .1875em;
z-index: 99;
position: relative;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15);
background-repeat: repeat-x;
background-position: 0 0;
background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%);
background-color: #e1e1e1;
margin-top: 3em;
margin-left: .75em;
margin-right: .75em;
padding-left: 0;
padding-bottom: 0;
padding-right: 0;
padding-top: 0;
width: 340px;
height: 160px;
}
.arrow_box:after, .arrow_box:before {
border: 13px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom:100%;
}
.arrow_box:after {
border-bottom-color: #fafafa;
border-width: 14px;
margin-left: -24px;
}
.arrow_box:before {
border-bottom-color: #999;
border-width: 15px;
margin-left: -25px;
}
How do I create the following arrow using pure CSS ?
So Far, I have this:
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:green;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft">Left</div>
</div>
Here's a Working Fiddle
Or a bigger One
<div class="HalfCircleLeft"></div>
.HalfCircleLeft
{
margin: 100px;
height: 100px;
width: 50px;
border-radius: 0 50px 50px 0;
background-color: #cfa040;
position: relative;
}
.HalfCircleLeft:before
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
top: 40px;
left: 10px;
}
.HalfCircleLeft:after
{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #cfa040;
top: 40px;
left: 13px;
}
Here's a first crude mockup based on your code and the css from cssarrowplease.com. Basically, it uses two CSS triangles, one a bit smaller than the other to create the arrow shape.
<style>
.halfCircleLeft{
float:left;
height:50px;
width:40px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:#00FF00;
}
.arrow_box {
position: relative;
top: 50%;
}
.arrow_box:after, .arrow_box:before {
right: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 255, 0, 0);
border-right-color: #00ff00;
border-width: 10px;
top: 50%;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 16px;
top: 50%;
margin-top: -16px;
}
</style>
<div class="bottom_boxes_section">
<div class="halfCircleLeft"><div class="arrow_box"></div></div>
</div>
I'm trying to add some css3 styles on an element, basing on an image model.
After many search, I've been able to have a some results, but not all I need.
You can see on the following image : http://soultherapy.free.fr/img/css3_need_screen.png
=> on the top : the effects I'm trying to reproduce in css3
=> on the bottom : the effects I was able to realize with css3 only : very very far from perfection ^^
As you can see, there are problems with border and shading of the right arrow...
Here is the html code :
<div class="span6">
the text<b></b>
</div>
And the css code :
.arrow-box, .arrow-box:hover {
position: relative;
display: inline-block;
font-weight: bold;
padding: 6px 12px 6px 30px;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-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);
outline: 1px solid #5e98ba;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid #c4c7c9;
border-left: 0;
}
.arrow-box:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.arrow-box:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba ;
}
.arrow-box b {
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba ;
}
Do you think what I'm trying to do is possible only with css3 ?
If it's the case, could you help me to find the correct css3 code.
Fiddle: http://jsfiddle.net/2cDnV/1/
I know my solution does not look exactly like your image but might help you to get started.
You can play around the code a bit to get what you want and to bring elegance to it.
You can find the jsFiddle here.
HTML:
<div class="marginer">
<div class="box">
<div class="boxIn">This is text</div>
<div class="boxArrowUp">
<div class="boxArrowUpIn"></div>
</div>
<div class="boxArrowDown">
<div class="boxArrowDownIn"></div>
</div>
</div>
</div>
CSS:
.marginer {
margin: 20px;
}
.boxIn {
float: left;
border: 1px solid #fff;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 8px 3px 6px rgba(0, 0, 0, .5);
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
box-shadow: 1px 4px 3px rgba(0, 0, 0, .5);
}
I've played a bit with shadows and tranforms to achieve the result.
Let me know if it helped you.
Here is the final code to obtain exactly the same result as in the original image : http://jsfiddle.net/developpeuse_web/TSFMT/1/
HTML :
<div class="box">
<div class="left-shadow"></div>
<div class="boxIn"></div>
<div class="boxArrowUp">
<div class="boxArrowUpIn"></div>
</div>
<div class="boxArrowDown">
<div class="boxArrowDownIn"></div>
</div>
</div>
CSS :
.left-shadow {
position: absolute;
height: 100%;
width: 23px;
left: 0px;
top: 0px;
background-image: -webkit-gradient(linear, left top, right top, from(#333333), to(transparent));
background-image: -webkit-linear-gradient(left, #333333, transparent);
background-image: -moz-linear-gradient(left, #333333, transparent);
background-image: -o-linear-gradient(left, #333333, transparent);
background-image: linear-gradient(left, #333333, transparent);
opacity: 0.44;
filter : alpha(opacity=44);
}
.boxIn {
float: left;
border: 1px solid #fff;
width: 100px;
height: 20px;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
}
Thanks Harshad !
Thanks...of course it helped me a lot !
If it's not perfect, well it's very close :)
In complement, I've just found another way to generate shadow, by using "-webkit-filter: drop-shadow". So I've add this attribute to .box element, and remove the grey box-shadow on all other elements (.box, .boxArrowUpIn:after, .boxArrowDownIn:after ) : http://jsfiddle.net/developpeuse_web/TSFMT/
.marginer {
margin: 20px;
}
.boxIn {
float: left;
border: 1px solid #fff;
border-right: 0;
padding: 6px 12px 6px 30px;
box-shadow: 1px 2px 0px #5e98ba, 1px -1px 0px #5e98ba;
}
.box {
position: relative;
display: inline-block;
font-weight: bold;
margin: 10px 10px 10px -18px;
color: #fff !important;
background-color: #5e98ba;
/* -webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
-moz-box-shadow: 3px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 8px 3px 6px rgba(0, 0, 0, .5); */
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
.box:before {
content:' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
}
.boxArrowUp {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #5e98ba transparent transparent #5e98ba;
}
.boxArrowUpIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
top: -10px;
left: -5px;
border-top: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 0px 0px #5e98ba, 0px -1px 0px #5e98ba;
}
.boxArrowUpIn:after {
content:' ';
position: absolute;
width: 2px;
height: 20px;
top: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
-ms-transform:rotate(28deg);
z-index: 2;
/* box-shadow: 3px 2px 4px rgba(0, 0, 0, .5); */
}
.boxArrowDown {
content:' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #5e98ba #5e98ba;
}
.boxArrowDownIn:before {
content:' ';
position: absolute;
width: 10px;
height: 20px;
bottom: -10px;
left: -5px;
border-bottom: 1px solid #fff;
border-right: 0px;
box-shadow: 0px 2px 0px #5e98ba, 0px 0px 0px #5e98ba;
}
.boxArrowDownIn:after {
content:' ';
position: absolute;
width: 2px;
height: 19px;
bottom: -11px;
left: -1px;
background: #5e98ba;
border-left: 1px solid #fff;
-moz-transform:rotate(332deg);
-webkit-transform:rotate(332deg);
-o-transform:rotate(332deg);
-ms-transform:rotate(332deg);
z-index: 2;
/* box-shadow: 1px 4px 3px rgba(0, 0, 0, .5); */
}
Don't know if it's a better solution for browsers compatibility, but looks a little bit cleaner.
I think the last detail I have to do is to add an inner shadow on the left border, and it will be exactly what I need. I'll post the final code here.
Thanks very much !
Is it too late to enter the contest ?
The HTML
<div id="mysolution">MY SOLUTION<div id="arrow"></div></div>
The CSS
#mysolution {
color: red;
padding: 10px 9px 10px 25px;
position: relative;
display: block;
z-index: 1;
width: 170px;
height: 30px;
overflow: hidden;
}
#mysolution:after, #mysolution:before {
content: " ";
display: block;
left: -20px;
position: absolute;
width: 80%;
}
#mysolution:before {
z-index: -2;
height: 30%;
top: 11%;
-webkit-transform: skewX(-35deg);
background-image: linear-gradient(55deg, black, rgb(94, 152, 186) 30%);
border-right: 1px solid white;
border-top: 1px solid white;
box-shadow: 1.52px -1px 0px #5e98ba, 4px 4px 5px rgb(110, 110, 110);
}
#mysolution:after {
z-index: -1;
height: 28%;
bottom: 28.95%;
-webkit-transform: skewX(35deg);
background-image: linear-gradient(125deg, black, rgb(94, 152, 186) 30%);
padding-right: .8px;
border-right: 1px solid white;
border-bottom: 1px solid white;
box-shadow: 1.52px 1px 0px #5e98ba, 1.52px 0.5px 0px #5e98ba,-2px 4px 5px rgb(110, 110, 110);
}
#arrow {
position: absolute;
width: 0px;
height: 0px;
left: 0px;
top: 37px;
border-width: 5px 10px;
border-style: solid;
border-color: #315164 #315164 transparent transparent;
z-index: -3;
-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.45));
}
fiddle
Just trying to do it with less divs and less CSS. (And picking ideas from the work already done... :-)