CSS中的一個(gè)重要樣式屬性就是border-radius，通過此屬性可以設(shè)置一個(gè)元素的邊框?yàn)閳A角，默認(rèn)情況下，圓角是均勻的。

但是有時(shí)候設(shè)計(jì)師會要求我們只需要一個(gè)角是直角，那么該如何實(shí)現(xiàn)呢？下面我們來介紹一下兩種方法。

一、使用border-radius以外的方法

{
border-top-left-radius: 0;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 0;
}

如上代碼，我們將左上角和右下角的圓角設(shè)置為0，而右上角和左下角的圓角設(shè)置為50%，這樣便實(shí)現(xiàn)了一個(gè)角為直角的效果。

二、使用偽類:before和:after

{
position: relative;
}
:before, :after {
content:''; 
position: absolute; 
width: 0; 
height: 0; 
border-top: 20px solid #fff; 
border-right: 20px solid #fff; 
border-left: 20px solid purple; 
border-bottom:20px solid purple; 
top:-20px; 
left:0;
}
:after {
top:auto; 
bottom:-20px; 
left:0; 
border-top:20px solid limegreen; 
border-right:20px solid limegreen; 
border-left:20px solid #fff; 
border-bottom:20px solid #fff;
}

如上代碼，我們使用偽類:before和:after分別設(shè)置了兩個(gè)相對定位的元素，并設(shè)置了邊框，再將其中一個(gè)元素旋轉(zhuǎn)45度，便可以實(shí)現(xiàn)一個(gè)角為直角的效果。

以上兩種方法都可以實(shí)現(xiàn)一個(gè)角為直角的效果，我們可以根據(jù)自己的喜好和場景選擇使用哪一種方式。