没有四舍五入的边界半径[重复]答案

【问题标题】：Border-radius without rounding [duplicate]没有四舍五入的边界半径[重复]
【发布时间】：2017-09-08 01:47:06
【问题描述】：

我试图用一个切掉的角来获得 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%);}

【问题讨论】：

标签： css

【解决方案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;
}

&lt;div class="cutCorner"&gt;&lt;/div&gt;

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>

【讨论】：

有没有机会得到类似的效果，但有透明的角落？我想从带有背景的 div 中显示渐变。我在主帖中添加了澄清编辑。
..so 与其让它“看起来像”角已被切掉，不如“从字面上”（你知道我的意思）切掉它。对吗？
@user3282071 - 查看我的支持渐变背景 div 和图像背景页面的更新 :)
@user3282071 这对你有用吗？感谢您的努力:)
现在完美运行。非常感谢您，对我迟到的回复感到抱歉。

【解决方案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>

【讨论】：

有什么改变可以得到类似的效果，但有透明的角落？我想从带有背景的 div 中显示渐变。
您还可以为角边框应用渐变边框样式。这是CSS tricks链接css-tricks.com/examples/GradientBorder@user3282071

【解决方案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;
}

【讨论】：