Haz un triángulo CSS con fondo transparente en un div con imagen blanca BG?

Ok, estoy intentando replicar el efecto que ve aquí en la parte inferior de la página, con el botón Volver arriba: http://www.ppp-templates.de/tilability/ - Después del área de contenido para Estamos conectados.Haz un triángulo CSS con fondo transparente en un div con imagen blanca BG?

básicamente él está usando una imagen de fondo para eso y me gustaría replicarlo con CSS y mantener el mismo efecto.

sé cómo crear triángulos con CSS con las fronteras, pero en mi caso me gustaría usar la imagen bg transparente y no un color por lo que no puede utilizar las fronteras

quité la imagen de fondo y usé #FFF en todo el div, así que ahora todo está en blanco ... Creé un nuevo div en el que agregué el botón Volver arriba y el fondo añadido: transparente para que sea transparente, pero ¿cómo creo el triángulo a través de CSS? ?

Cualquier ayuda es muy apreciada.

Fuente

2012-07-07 FinalDestiny

Puede intentar usar estas propiedades: -webkit-background-clip: text; color: rgba (0, 0, 0, 0); – eveevans

relacionado: http://stackoverflow.com/questions/23758922/transparent-arrow-triangle –

el violín:

http://jsfiddle.net/JaMH9/2/

El HTML:

<div class="bar"> 
    <span class="home">^<br>Home, sweet home!</span> 
</div>

El CSS:

.bar { 
    position: relative; 
    width: 90%; 
    height: 30px; 
    margin: 0 auto; 
} 

.home { 
    position: absolute; 
    top: 0px; 
    left: 60%; 
    width: 20%; 
    text-align: center; 
} 

.bar:before, .bar:after { 
    content:''; 
    position: absolute; 
    top: 0; 
    height: 0; 
    border-top: 30px solid white; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
      box-sizing: border-box; 
} 

.bar:before { 
    left: 0; 
    width: 70%; 
    border-right: 30px solid transparent; 
} 

.bar:after { 
    right:0; 
    width: 30%; 
    border-left: 30px solid transparent; 
}

Fuente

2012-07-07 22:33:22 biziclop

Esta es una gran respuesta. Por favor, cuando pueda, ponga algunas notas sobre por qué esto funciona. Puedo inferir mucho del razonamiento, pero todavía hay algunas cosas que son un misterio para mí. –

Aquí tiene, http://jsfiddle.net/pkUx7/1/

HTML

<body> 
    <div id = "footer"></div> 
    <div id = "bottom-line-left"></div> 
    <div id = "triangle"></div> 
    <div id = "bottom-line-right"></div> 
</body>

CSS

body { 
    background-color: purple; 
} 

div { 
    margin:0; 
    padding:0; 
    background-color: violet; 
} 

#footer { 
    height: 100px; 
} 

#bottom-line-left, #bottom-line-right { 
    display: inline-block; 
    height: 20px; 
} 

#bottom-line-left { 
    width: 61%; 
} 

#bottom-line-right { 
    float: right; 
    width: 37%; 
} 

#triangle { 
    margin-left:-6px; 
    margin-right: -4px; 
    padding:0; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 20px solid purple; 
}

Fuente

2012-07-07 22:43:26 abhshkdz

simplemente tiré esto juntos, es probable que haya una mejor manera de lograr este efecto.

HTML

<div class="div1">Lorem Ipsum</div> 
<div class="div2"></div> 
<div class="div3"></div> 
<div class="div4"></div>

CSS

body { 
    background-color: gray; 
    border: 20px solid gray; 
} 
.div1 { 
    background-color: white; 
    border: 20px solid white; 
} 
.div2 { 
    float: right; 
    border-top: 20px solid white; 
    border-right: 20px solid white; 
    border-left: 20px solid transparent; 
} 
.div3 { 
    float: right; 
    margin: 10px -20px; 
    border-bottom: 20px solid white; 
    border-right: 20px solid transparent; 
    border-left: 20px solid transparent; 
} 
.div4 { 
    border-top: 20px solid white; 
    border-right: 20px solid transparent; 
    margin-right: 40px; 
}

Ver que here.

Fuente

2012-07-07 22:44:30 Neil

Aquí hay una manera de hacer un triángulo con marcado bastante mínima y CSS:

HTML:

<div class="triangle"></div>

CSS:

.triangle { 
    width: 0; 
    height: 0; 
    border-left: 35px solid transparent; 
    border-right: 35px solid transparent; 
    border-bottom: 35px solid gray; 
}

http://jsbin.com/iribib/21

Fuente

2012-07-08 20:22:23

Usted puede utilizar el vector path . Por ejemplo, triángulo transparente con borde verde:

<svg height="151" width="150"> 
    <path d="m0 150 h150 l -75 -150 z" fill="transparent" stroke="green" /> 
</svg>

Ver que here.

Fuente

2014-06-24 14:49:09

Haz un triángulo CSS con fondo transparente en un div con imagen blanca BG?

Respuesta

Cuestiones relacionadas