Grenzradius oben auf dem Dreieck links CSS

Question

Ich habe diesen Code

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>

Wie kann ich Grenze Radius links oben nach oben CSS Dreieck anwenden? Es scheint unmöglich zu sein here.

Answer 1

• ersten Satz gleich border-width auf allen Seiten
• Dann fügen Sie border-color-top und left und stellen Sie gibt right und 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>

mit box-shadow Sie ein Pseudo-Element für das Geben eines linken und Position absolute 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

es in einem übergeordneten div Wickeln und den Eltern border

http://jsfiddle.net/o6y997ds/

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