的CSS三角邊境和畦半徑一點

但我不能做在CSS三角形的點舍入。這裏是我的代碼：

.contour { 
 
    padding: 60px 40px 40px 40px; 
 
    margin: 10px; 
 
    width: auto; 
 
    -webkit-border-radius: 11px; 
 
    -moz-border-radius: 11px; 
 
    border-radius: 11px; 
 
    border: solid 3px #FD8906; 
 
    position: relative; 
 
    background-color: #FFF; 
 
} 
 
.contour:after, 
 
.contour:before { 
 
    top: -3px; 
 
    left: 10%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 
.contour:after { 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-top-color: #ffffff; 
 
    border-width: 33px; 
 
    margin-left: -33px; 
 
} 
 
.contour:before { 
 
    border-color: rgba(253, 137, 6, 0); 
 
    border-top-color: #FD8906; 
 
    border-width: 38px; 
 
    margin-left: -38px; 
 
}

<html> 
 
<div class="contour"> 
 
</div> 
 

 
</html>

https://jsfiddle.net/dxjv2jus/

你能幫我請

來源

2016-11-17 Pierre G

這可能是有益的：http://stackoverflow.com/questions/12041938/how-to-create-a-triangle-in-css3-using-border-radius – Turnip

您可以通過繪製一個圓角正方形框和應用旋轉它做出來。

html{ background-color:#FFF;} 
 
.contour { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin:10px; 
 
} 
 
.contour-holder { 
 
    padding:60px 40px 40px 40px; 
 
    width:auto; 
 
    -webkit-border-radius: 11px; 
 
    -moz-border-radius: 11px; 
 
    border-radius: 11px; 
 
    border:solid 3px #FD8906; 
 
    position: relative; 
 
    background-color:#FFF; 
 
} \t 
 

 
.contour:before { 
 
    transform: rotate(-45deg); 
 
    border-radius: 0 0 0 10px; 
 
    left: 10%; 
 
    border:solid 3px #FD8906; 
 
    background: white; 
 
    content: " "; 
 
    height: 40px; 
 
    width: 40px; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    top: -23px; 
 
    z-index: 10; 
 
}

<div class="contour"> 
 
    <div class="contour-holder"> 
 
    
 
    </div> 
 
</div>

來源

2016-11-17 13:20:57

謝謝你真是太棒了！有用！ –

@PierreG歡迎您） –

的CSS三角邊境和畦半徑一點

回答

相關問題