Ricreare una forma di pulsante con estremità triangolare in CSS3

Sto tentando di ricreare questa forma in CSS3.Ricreare una forma di pulsante con estremità triangolare in CSS3

Questa era la mia soluzione:

<span><div id="shape"></div></span>

span { 
    display: block; 
    margin-left: 88px; 
} 

#shape { 
    width: 160px; 
    height: 100px; 
    background: #dcdcdc; 
} 

#shape:before { 
    height: 76px; 
    width: 76px; 
    top: 20px; 
    content:""; 
    position: absolute; 
    border-radius: 10px; 
    background-color: #ccc; 
    left: 60px; 
    -webkit-transform:rotate(45deg); 

} 

#shape:after { 
    height: 76px; 
    width: 76px; 
    top: 20px; 
    content:""; 
    position: absolute; 
    border-radius: 10px; 
    left: 220px; 
    -webkit-transform:rotate(45deg); 
    background-color: #ccc; 
}

Purtroppo, che non scala: CodePen demo (I cambiato lo sfondo-colori per illustrare il modo in cui l'ho fatto). È importante che si riduca verticalmente.

Una soluzione JavaScript potrebbe funzionare anche.

fonte

2013-08-27 johnny

si dispone già di un'immagine di ciò che si desidera. Perché non puoi semplicemente usarlo (dopo aver tagliato lo sfondo grigio)? Potresti usare più dimensioni per la tua pagina. – 11684

come vuoi ridimensionarlo ?? –

Purtroppo jQuery non è in grado di impostare direttamente l'altezza degli pseudo elementi, altrimenti potresti impostarlo con jQuery. Se vuoi aggiungere altri elementi HTML, sarebbe facile farlo con jQuery. – robooneus

enter image description here

demo http://jsfiddle.net/Le8Hw/2/

stile:

#kougiland{ 
    position:relative; 
    width:110px; 
    height:34px; 
    margin:100px; 
    color:white; 
    text-align:center; 
    font-size: 22px; 
    vertical-align: middle; 
    line-height: 30px; 
    background-color:red; 
    box-shadow: 0 4px 8px #ccc, 10px 5px 8px -4px #ccc, -9px 5px 8px -4px #CCC; 
    background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 0%, rgba(244, 244, 244, 0.35) 50%, rgba(225, 225, 225, 0) 51%, rgba(246, 246, 246, 0) 100%); 
} 

#kougiland:before,#kougiland:after{ 
    content:''; 
    position:absolute; 
    top: 4px; 
    height: 26px; 
    width: 26px; 
    background:red; 
    border-radius:4px; 
    -webkit-transform: rotateZ(45deg); 
    background-color:red; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0%, rgba(244, 244, 244, 0.35) 50%, rgba(225, 225, 225, 0) 51%, rgba(246, 246, 246, 0) 100%); 
} 
#kougiland:before{ 
    left:-14px; 
    box-shadow: 0px 7px 11px -4px #ccc; 
} 
#kougiland:after{ 
    right:-14px; 
    box-shadow: 7px 0px 11px -4px #ccc; 
}

markup:

<div id=kougiland>weiter</div>

basta cambiare il colore mentre gradite e divertirsi con essa :-)

fonte

2013-08-27 14:19:38

Questo non risolve il problema dell'OP ... deve essere in grado di cambiare altezza dinamica in base al contenuto. – robooneus

quindi utilizzare per la larghezza dello schermo: 100%; e imposta l'altezza con jquery –

Non puoi accedere a pseudo elementi con jquery/js. Sono elementi creati e non fanno parte del DOM. – robooneus

Una possibilita 'potrebbe utilizzare le trasformazioni 3D:

.diamond { 
    left: 50px; 
    top: 50px; 
    position: absolute; 
    height: 88px; 
    width: 300px; 
    background-color: transparent; 
    -webkit-perspective: 100px; 
    -moz-perspective: 100px; 
    perspective: 100px; 
} 

.diamond:before { 
    content: ''; 
    width: 100%; 
    height: 51%; 
    left: 0%; 
    top: 0%; 
    position: absolute; 
    border-color: red; 
    border-style: solid; 
    border-width: 3px 3px 0px 3px; 
    -webkit-transform: rotateX(20deg); 
    -moz-transform: rotateX(20deg); 
    transform: rotateX(20deg); 
    border-radius: 6px; 
    background-color: blue; 
} 

.diamond:after { 
    content: ''; 
    width: 100%; 
    height: 51%; 
    left: 0%; 
    bottom: 0%; 
    position: absolute; 
    border-color: red; 
    border-style: solid; 
    border-width: 0px 3px 3px 3px; 
    -webkit-transform: rotateX(-20deg); 
    -moz-transform: rotateX(-20deg); 
    transform: rotateX(-20deg); 
    border-radius: 6px; 
    background-color: lightblue; 
}

fiddle

fonte

2013-08-27 20:40:26 vals

Questa è un'ottima risposta e merita pochi voti :) – Harry

Ricreare una forma di pulsante con estremità triangolare in CSS3

risposta

Problemi correlati