граница радиуса вверху слева на треугольник с помощью CSS

Question

У меня есть этот код

div { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 85px 85px 0 0; 
 
    border-color: #c00000 transparent transparent transparent; 
 
    float: left; 
 
    position: absolute; 
 
    top: 8px; 
 
}

<div></div>

Как я могу применить границы радиуса слева вверху выше CSS треугольника? Это кажется невозможным here.

Answer 1

• Первый набор равен border-width со всех сторон
• Затем добавьте border-color к top и left и установить right и bottomtransparent

div { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 55px; 
 
    border-color: #c00000 transparent transparent #c00000; 
 
    float: left; 
 
    position: absolute; 
 
    top: 8px; 
 
    border-radius: 10px 0px 0px 0px; 
 
}

<div></div>

с box-shadow вы можете использовать псевдо-элемент для придания box-shadow

div { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 55px; 
 
    border-color: #c00000 transparent transparent #c00000; 
 
    float: left; 
 
    position: absolute; 
 
    top: 8px; 
 
    border-radius: 10px 0px 0px 0px; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 1px; 
 
    height: 155px; 
 
    top: -55px; 
 
    left: 54px; 
 
    transform: rotate(45deg); 
 
    transform-origin: left top; 
 
    box-shadow: 2px 1px 6px 1px red; 
 
}

<div></div>

Answer 2

Заверните внутри родительского DIV и дать родителю border

http://jsfiddle.net/o6y997ds/

<div class="parent"><div class="div"></div></div> 
.parent{ 
     border-radius:10px 0px 0px 0px; 
     overflow:hidden; 
     }