没有舍入的边界半径

Question

我试图让一个切出一个角落的div。即时通讯使用：

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

可悲的是，即时得到角落圆角，但随着平，45' 切IM真正需要的角落。 This是我需要的。更喜欢纯粹的CSS，但JavaScript中的解决方案也是完美的。

澄清编辑： 我忘了提，我需要显示渐变背景与这个角落，也 - 背景=面板体DIV从引导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三角形救援：

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

不能达到与border-radius这个效果，你需要使用各种不同的CSS属性来达到这种效果。

这里的标记：

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

这里的风格：

.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

你可以尝试像为 -

.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>