沒有舍入的邊界半徑

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>