CSS3角邊框

Question

線

我試圖做出右下方邊框必須有一個對角線，像下面的圖像在一個盒子：

有沒有人的想法如何，我可以不使用背景圖像做到這一點？

Answer 1

例1 - link

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    padding: 20px 60px; 
 
} 
 

 
.btn, 
 
.btn span{ 
 
    width: 300px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    position: relative;  
 
    color: #e74c3c; 
 
    font: bold 18px/100px'segoe ui'; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    overflow: hidden; 
 
    padding: 2px; 
 
} 
 
.btn span {  
 
    width: 100%; 
 
    height: 100%;  
 
} 
 
.btn:before, 
 
.btn span:before{ 
 
    content:''; 
 
    position: absolute; right: -500%; 
 
    width: 1100%; 
 
    height: 1100%; 
 
    background: #c00;  
 
    z-index: -1; 
 
} 
 

 
.btn:hover span{ 
 
    color: #000; 
 
} 
 
.btn:hover:before{ 
 
    background: #000; 
 
} 
 

 

 

 
/* ----- btn-left-top ----- */ 
 
.btn-left-top:before, 
 
.btn-left-top span:before{ 
 
    top: 20px; 
 
    -webkit-transform-origin: 46% top; 
 
    -ms-transform-origin: 46% top; 
 
    transform-origin: 46% top; 
 
    -webkit-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    transform: rotate(-45deg);  
 
} 
 
.btn-left-top span:before{  
 
    top: 19px; 
 
    background: #fff;  
 
} 
 

 

 

 
/* ----- btn-left-bottom ----- */ 
 
.btn-left-bottom:before, 
 
.btn-left-bottom span:before{ 
 
    bottom: 20px; 
 
    -webkit-transform-origin: 46% bottom; 
 
    -ms-transform-origin: 46% bottom; 
 
    transform-origin: 46% bottom; 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg);  
 
} 
 
.btn-left-bottom span:before{  
 
    bottom: 19px; 
 
    background: #fff;  
 
} 
 

 

 

 
/* ----- btn-right-top ----- */ 
 
.btn-right-top:before, 
 
.btn-right-top span:before{ 
 
    top: 20px; 
 
    -webkit-transform-origin: 54% top; 
 
    -ms-transform-origin: 54% top; 
 
    transform-origin: 54% top; 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg);  
 
} 
 
.btn-right-top span:before{  
 
    top: 19px; 
 
    background: #fff;  
 
} 
 

 

 
/* ----- btn-right-bottom ----- */ 
 
.btn-right-bottom:before, 
 
.btn-right-bottom span:before{ 
 
    bottom: 20px; 
 
    -webkit-transform-origin: 54% bottom; 
 
    -ms-transform-origin: 54% bottom; 
 
    transform-origin: 54% bottom; 
 
    -webkit-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    transform: rotate(-45deg);  
 
} 
 
.btn-right-bottom span:before{  
 
    bottom: 19px; 
 
    background: #fff;  
 
}

<a href="#" class="btn btn-left-top"> 
 
    <span>btn-left-top</span> 
 
</a> 
 

 
<a href="#" class="btn btn-right-top"> 
 
    <span>btn-right-top</span> 
 
</a> 
 

 
<a href="#" class="btn btn-right-bottom"> 
 
    <span>btn-right-bottom</span> 
 
</a> 
 

 

 
<a href="#" class="btn btn-left-bottom"> 
 
    <span>btn-left-bottom</span> 
 
</a>

實施例2 - link

* { 
 
    \t margin: 0; 
 
    \t padding: 0; \t 
 
} 
 

 
body { 
 
    padding: 20px 60px;  
 
} 
 

 
.btn{ 
 
    width: 300px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    position: relative; 
 
    border: 4px solid #e74c3c;  
 
    color: #e74c3c; 
 
    font: bold 18px/100px 'segoe ui'; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 
.btn > span:before { 
 
    content: ''; 
 
    position: absolute; bottom: 12px; right: 9px; 
 
    width: 66px; 
 
    height: 66px; 
 
    transform: rotate(45deg); 
 
    z-index: 1; 
 
    border-right: 4px solid #e74c3c; 
 
} 
 
.btn:before, 
 
.btn:after{ 
 
    content: ''; 
 
    position: absolute; bottom: -4px; right: -4px; 
 
} 
 
.btn:before{  
 
    width: 47px; 
 
    height: 0;  
 
    border-bottom: 4px solid #fff; 
 
} 
 
.btn:after{  
 
    width: 0; 
 
    height: 47px;  
 
    border-right: 4px solid #fff; 
 
} 
 
.btn:hover{ 
 
    border: 4px solid #4169E1;  
 
    color: #4169E1; 
 
} 
 
.btn:hover > span:before{ 
 
    border-right: 4px solid #4169E1; 
 
}

<a href="#" class="btn"> 
 
    <span>test</span> 
 
</a>

Fiddle

Answer 2

檢查了這一點，它可以幫助click
HTML

<div class="blockHead"> 
    <span class="blocktext"> 
    ABC Team 
    </span> 
</div> 

你CSS

.blockHead:after { 
    color:#4D81BF; 
    border-left: 20px solid; 
    border-top: 20px solid; 
    border-bottom: 20px solid transparent; 
    display: inline-block; 
    content: ''; 
    position: absolute; 
    right: -20px; 

} 
.blockHead { 
    background-color:#4D81BF; 
    /*width: 150px; */ 
    height: 40px; 
    display: inline-block; 
    position: relative; 
} 
.blocktext{ 
    color:white; 
    font-weight:bold; 
    padding:0px 40px 0px 10px; 
    font-family:Arial; 
    font-size:11; 
    line-height:2.5; 
}