2017-12-23 27 views
5

Tôi đang cố tạo hình tam giác với các phần tử giả. giống như hình ảnh bên dưới. enter image description hereTam giác Html/Css với các phần tử giả

Nhưng đây là những gì tôi nhận được. enter image description here

Đây là những gì tôi đã thử cách này.

.container .form--container:before { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    left: 130px; 
    width: 28px; 
    height: 28px; 
    transform: translate(-1rem, -100%); 
    border-left: 1.5rem solid #979797; 
    border-right: 1.5rem solid #979797; 
    border-bottom: 1.5rem solid white; 
} 

Trả lời

6

Vấn đề là sử dụng đường viền. bạn có thể kiểm tra liên kết này How do CSS triangles work? và bạn sẽ hiểu cách biên giới hoạt động và tại sao bạn nhận được kết quả này.

Một giải pháp khác là sử dụng xoaybiên giới như thế này:

.box { 
 
    border: 1px solid; 
 
    margin: 50px; 
 
    height: 50px; 
 
    position:relative; 
 
    background: #f2f2f5; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-top: 1px solid; 
 
    border-left: 1px solid; 
 
    top: -11px; 
 
    left: 13px; 
 
    background: #f2f2f5; 
 
    transform: rotate(45deg); 
 
}
<div class="box"> 
 

 
</div>

Và trong trường hợp bạn muốn hộp của bạn với các mũi tên để được minh bạch, đây là một lừa để đạt được nó (như giải pháp trên xem xét màu rắn làm nền):

body { 
 
margin:0; 
 
background-image:linear-gradient(to right,yellow,pink); 
 
} 
 

 
.box { 
 
    border: 1px solid; 
 
    border-top:transparent; /*make border-top transparent*/ 
 
    margin: 50px; 
 
    height: 50px; 
 
    position:relative; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-top: 1px solid ; 
 
    border-left: 1px solid; 
 
    top: -11px; 
 
    left: 13px; 
 
    transform: rotate(45deg); 
 
} 
 
/* Use after element to mimic the border top with a gap using linear gradient*/ 
 
.box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left:0; 
 
    right:0; 
 
    height: 1px; 
 
    background-image:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px); 
 
}
<div class="box"> 
 

 
</div>

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