Tạo tam giác CSS với nền trong suốt trên div có hình ảnh bg trắng?

Ok vậy, tôi đang cố gắng sao chép hiệu ứng bạn thấy ở dưới cùng của trang, với nút quay lại trên cùng: http://www.ppp-templates.de/tilability/ - Sau khi vùng nội dung cho Chúng tôi giữ kết nối.Tạo tam giác CSS với nền trong suốt trên div có hình ảnh bg trắng?

về cơ bản anh ấy đang sử dụng hình nền cho điều đó và tôi muốn sao chép nó bằng CSS và giữ nguyên hiệu ứng tương tự.

tôi biết làm thế nào để tạo ra hình tam giác với CSS với biên giới, nhưng trong trường hợp của tôi, tôi muốn sử dụng hình ảnh bg minh bạch và không phải là một màu vì vậy tôi không thể sử dụng biên giới

Tôi đã gỡ bỏ hình nền và đã sử dụng #FFF trên toàn bộ div, do đó, bây giờ tất cả màu trắng ... Tôi đã tạo một div mới, trong đó tôi đã thêm nút quay lại trên cùng và thêm nền: minh bạch cho nó để trong suốt, nhưng làm cách nào để tạo tam giác thông qua CSS ?

Bất kỳ trợ giúp nào được đánh giá cao.

Nguồn

2012-07-07 FinalDestiny

Bạn có thể thử sử dụng thuộc tính này: -webkit-background-clip: văn bản; màu: rgba (0, 0, 0, 0); – eveevans

liên quan: http://stackoverflow.com/questions/23758922/transparent-arrow-triangle –

Các Fiddle:

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

HTML:

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

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

Nguồn

2012-07-07 22:33:22 biziclop

Đây là một phản hồi tuyệt vời. Xin vui lòng, khi bạn có thể, đặt một vài lưu ý là tại sao điều này hoạt động. Tôi có thể phỏng đoán rất nhiều lý do, nhưng vẫn có một số điều bí ẩn đối với tôi. –

Ở đây bạn đi, http://jsfiddle.net/pkUx7/1/

0.123.

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

Nguồn

2012-07-07 22:43:26 abhshkdz

tôi chỉ ném này lại với nhau, có thể là một cách tốt hơn để đạt được hiệu ứng này.

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

Xem nó here.

Nguồn

2012-07-07 22:44:30 Neil

Dưới đây là một cách để làm cho một hình tam giác với đánh dấu khá tối thiểu và 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

Nguồn

2012-07-08 20:22:23

Bạn có thể sử dụng vector path . Ví dụ: Ví dụ: hình tam giác trong suốt có đường viền màu lục:

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

Xem nó here.

Nguồn

2014-06-24 14:49:09

Tạo tam giác CSS với nền trong suốt trên div có hình ảnh bg trắng?

Trả lời

Các vấn đề liên quan