Randradius ohne Rundung

Question

Ich versuche mit einer ausgeschnittenen Ecke div zu bekommen. Im mit:

border-radius: 0px 50px 0px 0px; 

Leider im bekommen Ecke mit abgerundeter Ecke, aber im wirklich Ecke muß mit Wohnung, 45' geschnitten. This ist was ich brauche. Bevorzugen Sie reines CSS, aber die Lösung in JavaScript wird auch perfekt sein.

Klärung edit: Ich vergaß zu erwähnen, dass ich abgestufter Hintergrund mit dieser Ecke zeigen müssen, und auch - div mit Hintergrund = Plattenkörper aus Bootstrap 2.3.2

HTML : 
<div class="panel panel-default"> 
    <div class="panel-body"> 
    <div class="inner-div"><h2>Example</h2></div> 
    </div> 
</div> 

CSS : 
#panel-body {background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);} 

Answer 1

CSS Dreiecke zur Rettung:

div.cutCorner{ 
 
    height: 200px; 
 
    background: pink; 
 
    position: relative; 
 
} 
 

 
div.cutCorner:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    border-top: 50px solid white; 
 
    border-left: 50px solid pink; 
 
}

<div class="cutCorner"></div>

body { 
 
    background: url(http://lorempixel.com/800/600/); 
 
    background-size: cover; 
 
} 
 

 
div { 
 
    width: 200px; 
 
    min-height: 200px; 
 
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); 
 
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); 
 
    background-image:linear-gradient(red, yellow); 
 
    padding: 10px; 
 
} 
 

 
**AS per OP's edit**, this idea supports image background and gradient div :)

<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis, justo quis mollis volutpat, nibh enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis, justo quis mollis volutpat, nibh enim</p> 
 
</div>

Answer 2

Sie können diesen Effekt nicht erzielen mit border-radius, benötigen Sie eine Vielzahl von verschiedenen CSS-Eigenschaften verwenden, um diesen Effekt zu erzielen.

Hier ist das Markup:

<div class="cut-corner"></div> 

Hier ist die Stile:

.cut-corner { 
    height: 200px; 
    width: 200px; 
    background: #000; 
    position: relative; 
} 

.cut-corner:before { 
    content: ''; 
    position: absolute; 
    top: 0; right: 0; 
    border-top: 50px solid white; 
    border-left: 50px solid #000; 
    width: 0; 
} 

Answer 3

Sie mögen als versuchen können -

.box{ 
 
    width:50px; 
 
    height:50px; 
 
    background: rgba(0,0,0,.2); 
 
    margin:5px; 
 
    float:left; 
 
    position: relative; 
 
} 
 
.box1{ border-radius: 10px 0px 0px 0px;} 
 
.box2{ border-radius: 0px 10px 0px 0px;} 
 
.box3{ border-radius: 0px 0px 10px 0px;} 
 

 
/*-------------OR-------------*/ 
 

 
.box11:before,.box22:before,.box33:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0; 
 
} 
 
.box11:before{ 
 
    top: 0; 
 
    left: 0; 
 
    border-top: 10px solid white; 
 
    border-right: 10px solid red; 
 
} 
 
.box22:before{ 
 
    top: 0; 
 
    right: 0; 
 
    border-top: 10px solid white; 
 
    border-left: 10px solid red; 
 
} 
 
.box33:before{ 
 
    bottom: 0; 
 
    right: 0; 
 
    border-bottom: 10px solid white; 
 
    border-left: 10px solid red; 
 
}

<div class="box box1"></div> 
 
<div class="box box2"></div> 
 
<div class="box box3"></div> 
 

 
<div class="box box11"></div> 
 
<div class="box box22"></div> 
 
<div class="box box33"></div>