帶圓角的三角形，用CSS

我正在試着用圓形的頂尖做一個三角形，但它只是產生一個正常的三角形和1/2的圓。帶圓角的三角形，用CSS

.myT{ 
width: 350px; 
    height: 233px; 
    background-color: #5cb85c; 
    -moz-border-radius: 0% 0% 50% 50%/0% 0% 100% 100%; 
    -webkit-border-radius: 0% 0% 50% 50%/0% 0% 100% 100%; 
    border-radius: 0% 0% 50% 50%/0% 0% 100% 100%; 
}

來源

2017-01-19 harlen giraldo

一些代碼將不會受到傷害。 – brezanac

向我們展示一些努力。 – dippas

可能使用與HTML完美集成的SVG's –

使用before元素創建一個帶鈍尖的三角形和一個after元素來創建一個圓來圓出尖端。

http://codepen.io/andrewray/pen/QddQWg

.triangle { 
    position:relative; 
    height:10px; 
    width:10px; 

    &:before { 
    content: ''; 
    display:block; 
    width: 10px; 
    height: 10px; 
    border-style: solid; 
    border-width: 0 100px 100px 100px; 
    border-color: transparent transparent #007bff transparent; 
    } 

    &:after { 
    content: ''; 
    display:block; 
    width: 12px; 
    height: 12px; 
    position:absolute; 
    top:8px; 
    left:99px; 
    border-radius: 100%; 
    background:#007bff; 
    } 
}

調整值根據需要

來源

2017-01-19 02:40:42

工程！這是我的 http://codepen.io/H4isan/pen/gggvMM –

帶圓角的三角形，用CSS

回答

相關問題