nút mũi tên với nền dọc dốc

Question

tôi cần phải làm cho nút này:

Thông thường khi tôi cần phải làm cho nút mũi tên với gradient và biên giới, tôi thêm .button:before phần tử với vị trí tuyệt đối, sử dụng transform: rotate(-45deg) translate(%SOMETHING%); và thêm background: linear-gradient(45deg, %COLORS%);. Nhưng bây giờ tôi cần phải làm cho nút, góc mũi tên trong đó là không đúng. Tôi làm nó như thế nào?

Answer 1

Bạn có thể thiết kế nút này sử dụng :before selector:

.button { 
 
    width: 120px; 
 
    height: 50px; 
 
    position: relative; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius:   5px; 
 
    border:1px solid #4d7a9c; 
 
    position:relative; 
 
    color:white; 
 
    font-size:18px; 
 
    
 
    background: #238fe7; /* Old browsers */ 
 
    background: -moz-linear-gradient(top, #238fe7 0%, #156fba 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(top, #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to bottom, #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238fe7', endColorstr='#156fba',GradientType=0); /* IE6-9 */ 
 
} 
 

 
.button:before { 
 
    content: ""; 
 
    position: absolute; 
 
    transform: scaleX(0.6) rotate(45deg); 
 
    height: 38px; 
 
    width: 38px; 
 
    right:-18px; 
 
    top:5px; 
 
    border-radius: 5px; 
 
    z-index:-1px; 
 
    
 
    background: #238fe7; /* Old browsers */ 
 
    background: -moz-linear-gradient(-45deg, #238fe7 0%, #156fba 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(-45deg, #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(135deg, #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238fe7', endColorstr='#156fba',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
 
}

<button class="button">Text</button>

Answer 2

Bạn có thể làm điều đó như thế này:

#trape { 
 
    position: absolute; 
 
    height: 50px; 
 
    color: white; 
 
    width: 80px; 
 
    border:0; 
 
    background-image: linear-gradient(0deg, red, tan); 
 
} 
 

 
#trape:before { 
 
    content: ""; 
 
    position: absolute; 
 
    transform: scaleX(0.6) rotate(45deg); 
 
    height: 35px; 
 
    width: 35px; 
 
    right:-18px; 
 
    top:7px; 
 
    background-image: linear-gradient(-45deg, red, tan); 
 
}

<button id="trape"></button>

Hy vọng nó sẽ giúp :)