Question

我试图通过一个切出的角落来获得div。我正在使用：

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

可悲的是，我正在转弯角落，但我确实需要角落平坦，45'切。我需要This。喜欢纯CSS，但JavaScript中的解决方案也将是完美的。

澄清编辑：我忘了提到我需要透露这个角落的渐变背景，还有 - div with background = panel-body from 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三角形：

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

你可以尝试像 -

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

Answer 3

使用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;
}

边界半径没有舍入

3 个答案: