Innerhalb des Pfeils rechts mit umrandeter Kontur und Schattenbox

Question

Ich versuche, einige css3 -Styles auf einem Element basierend auf einem Bildmodell hinzuzufügen. Nach vielen Recherchen konnte ich einige Ergebnisse erzielen, aber nicht alles, was ich brauche.

Sie können auf dem folgenden Bild sehen: http://soultherapy.free.fr/img/css3_need_screen.png

\=> oben: die Effekte, die ich in css3 nachbilden möchte
\=> unten: die Effekte, die ich nur mit css3 realisieren konnte: weit weg von der Perfektion ^^

Wie Sie sehen können, gibt es Probleme mit der Umrandung und Schattierung des rechten Pfeils...

Hier ist der html -Code:

   der Text

Und der 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 ; 
}

Denken Sie, dass das, was ich versuche, nur mit css3 möglich ist?
Wenn ja, könnten Sie mir helfen, den richtigen css3 -Code zu finden.

Fiddle: http://jsfiddle.net/2cDnV/1/

Answer 1

Ich weiß, dass meine Lösung nicht genau wie Ihr Bild aussieht, aber sie könnte Ihnen helfen, anzufangen.

Sie können den Code ein wenig anpassen, um zu bekommen, was Sie möchten und ihm Eleganz verleihen.

Sie können das jsFiddle hier finden.

HTML:

        Dies ist Text

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);
}

Ich habe ein wenig mit Schatten und Transformationen gespielt, um das Ergebnis zu erzielen.

Lassen Sie mich wissen, ob es Ihnen geholfen hat.

Answer 2

Hier ist der endgültige Code, um genau das gleiche Ergebnis wie im Originalbild zu erhalten : http://jsfiddle.net/developpeuse_web/TSFMT/1/

HTML :

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;
}

Danke Harshad !

Answer 3

Danke...natürlich hat es mir sehr geholfen! Wenn es nicht perfekt ist, nun ja, es ist sehr nah dran :)

Zusätzlich habe ich gerade einen anderen Weg gefunden, um Schatten zu erzeugen, indem ich "-webkit-filter: drop-shadow" verwende. Also habe ich dieses Attribut zum .box-Element hinzugefügt und den grauen box-shadow auf allen anderen Elementen (.box, .boxArrowUpIn:after, .boxArrowDownIn:after) entfernt: 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); */
}

Weiß nicht, ob es eine bessere Lösung für die Browserkompatibilität ist, aber es sieht etwas sauberer aus.

Ich glaube, das letzte Detail, das ich noch tun muss, ist, einen inneren Schatten an der linken Grenze hinzuzufügen, und es wird genau das sein, was ich brauche. Ich werde den endgültigen Code hier posten.

Vielen Dank!

Answer 4

Ist es zu spät, am Wettbewerb teilzunehmen?

Der HTML-Teil

MEINE LÖSUNG 

Der CSS-Teil

#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

Nur versuchen, es mit weniger divs und weniger CSS zu tun. (Und Ideen aus bereits geleisteter Arbeit auswählen... :-)