CSS中的一個重要樣式屬性就是border-radius，通過此屬性可以設置一個元素的邊框為圓角，默認情況下，圓角是均勻的。

但是有時候設計師會要求我們只需要一個角是直角，那么該如何實現呢？下面我們來介紹一下兩種方法。

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

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

如上代碼，我們將左上角和右下角的圓角設置為0，而右上角和左下角的圓角設置為50%，這樣便實現了一個角為直角的效果。

二、使用偽類: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分別設置了兩個相對定位的元素，并設置了邊框，再將其中一個元素旋轉45度，便可以實現一個角為直角的效果。

以上兩種方法都可以實現一個角為直角的效果，我們可以根據自己的喜好和場景選擇使用哪一種方式。