のCssトライアングル一点

私はCSSでこの形を作る必要があります。の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トライアングル一点

答えて

関連する問題