Solo voi aiutare con questo come y S ei provato ma non ha funzionato come previsto ... Quindi idea di base è che siamo in grado di utilizzare gli elementi CSS pseudo per creare in tal senso ..
Demo
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: Arial;
text-align: center;
position: relative;
}
.wrapper:after {
content: "";
width: 0;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white; /* Tweak this to increase triangles height */
position: absolute;
right: 0;
top: 0;
}
Qui, sto facendo nulla Fantasia, stiamo usando uno pseudo elemento, ovvero nient'altro che un elemento virtuale che non esiste nel DOM ma possiamo inserirlo usando CSS e posizionando questo pseudoelemento sul lato destro del tuo wrapper. Questo ti aiuterà a ottenere la fine del nastro. Si noti che il colore del triangolo è hardcoded e non è trasparente.
fonte
2015-04-21 18:41:58
uso pseudo elementi –
Perché il voto verso il basso? Ha provato la cosa che ha pubblicato –