Stackoverflowers được tôn trọng,Hình tam giác CSS có hình nền
Làm cách nào để tạo phần tử hình tam giác với mẫu nền?
Ví dụ tôi cần div như thế này:
Nhưng tình trạng của tôi là như thế này:
Tất cả các ví dụ với các yếu tố tam giác sử dụng biên giới mà không thể có một img trong đó ....
Đây là lớp phụ của tôi cần giải nhiệt:
<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div>
.subsection {
.box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));
background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern
display: block;
clear: both;
float: left;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
display: none;
}
.subsection {
position:relative;
}
.subsection:before {
content:'';
position:absolute;
top:0;
left:0;
height:20px;
width:0;
border-left:20px solid white;
border-bottom:16px solid transparent;
}
.subsection:after {
content:'';
position:absolute;
top:36px;
left:0;
bottom:0;
width:0;
border-left:20px solid white;
border-top:16px solid transparent;
}
Và im nhận:
nào là tốt ... làm thế nào tôi có thể mang vào mũi tên trên đầu trang trong các hình thức yêu cầu? ... và che phủ các trường hợp div? ... Cảm ơn.
Tôi nghĩ rằng câu hỏi này đã trả lời một vấn đề tương tự http://stackoverflow.com/questions/11379085/make-a-css-triangle-with-transparent-background-on-a-div-with-white-bg-image?rq=1 – matthiasgh
Không phải không phải của nó trùng lặp .... cần phải có một hình ảnh với hình dạng NHƯNG với nền hình ảnh ... không wi th đầu vào màu từ một biên giới .... – SkyKOG
bạn sẽ xem xét sử dụng SVG thay vì CSS cho điều này? Nó có thể dễ dàng hơn. – Spudley