CSS边框角曲线向后[重复]答案

【问题标题】：CSS border corner curve backward [duplicate]CSS边框角曲线向后[重复]
【发布时间】：2014-12-20 01:03:13
【问题描述】：

如何仅使用 html 和 css 制作以下图片

【问题讨论】：

你能用html5画布吗？
为什么这个问题被否决了？？
投反对票的人从未试图找到解决方案，并认为它无法完成！
没有努力证明，这是 SO 的关键规则之一（不是说没有努力，只是没有显示）。我还没有投票，但倾向于否决票或接近投票。而且我认为这不可能做到，这绝不是拒绝投票的好理由。

【解决方案1】：

您可以使用 :after :pseudo-element 和单个 div 来做到这一点。

body {
  background: #88FF55;
}
div {
  position: relative;
  width: 150px;
  height: 100px;
  background: #01CC00;
}
div:after {
  content: 'i';
  color: #01CC00;
  position: absolute;
  font-size: 20px;
  bottom: 0;
  right: 0;
  width: 30px;
  font-weight: bold;
  height: 30px;
  text-align: right;
  line-height: 44px;
  border-top-left-radius: 100%;
  background: white;
}

&lt;div&gt;&lt;/div&gt;

您可以使用radial-gradient 进行透明切割。

body {
  background: #88FF55;
}
div {
  width: 150px;
  height: 100px;
  line-height: 188px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  color: #01CC00;
  background: -webkit-radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
  background: -moz-radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
  background: radial-gradient(100% 100%, circle, transparent 20px, #01CC00 22px);
}

&lt;div&gt;i&lt;/div&gt;

或者你可以使用svg的clipPath。

body {
  background: #88FF55;
}
div {
  height: 100px;
  background: #01CC00;
}

<svg width="150" height="100" viewBox="0 0 150 100">
  <clipPath id="shape">
    <path d="M2,2 L146,2 L146,76 A20,20 1,0 0 126,98 L2,98z" />
  </clipPath>
  <foreignObject clip-path="url(#shape)" width="150" height="100">
    <div></div>
  </foreignObject>
  <text x="140" y="97" font-weight="bold" font-size="16" fill="#01CC00">i</text>
</svg>

【讨论】：

绝对是一个/最好的解决方案，因为它只需要初始化一个 DOM 元素
我更喜欢使用ufll圈，然后添加一个溢出隐藏like this
@jbutler483 - 这种方法有两个优点：1) 通过添加text-align: right，文本可以很容易地向右对齐。 2) :pseudo-element 可以很容易地与右下角对齐，只需添加bottom: 0 和right: 0。

【解决方案2】：

具有绝对位置和边框半径：

.wrapper {
  width: 200px;
  height: 100px;
  position: relative;
  background-color: green;
}
.info {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: white;
  color: green;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  position: absolute;
  bottom: -7px;
  right: -7px;
}

<div class="wrapper">
  <div class="info">i</div>
</div>

【讨论】：

这里真的不需要多个元素。使用 ::before 和/或 ::after 伪效果就足够了。

【解决方案3】：

在父元素上应用overflow: hidden 和position: relative，在带有border-radius: 50% 的伪元素上使用position: absolute

:root{background: #333}
.wrapper {
  width: 200px;
  height: 100px;
  position: relative;
  background-color: green;
  overflow: hidden
}
.wrapper:before {
  content:'i';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  color: green;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  bottom: -4px;
  right: -6px;
}

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

【讨论】：

为什么这个答案没有得到更多的支持？可能是迄今为止最好的！

【解决方案4】：

这个解决方案的优点是不使用魔法值，只是一些简单的定位。 “i”在它自己的容器中，因此可以轻松地为它设置样式或替换为图像，而无需摆弄边距。

圆是通过使左上边框半径等于容器的宽度和高度来实现的。

.square {
  background-color: green;
  width: 200px;
  height: 100px;
  position: relative;
}
.circle {
  background-color: white;
  border-top-left-radius: 25px;
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.icon {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="square">
  <div class="circle">
    <span class="icon">i</span>
  </div>
</div>

JSFiddle

【讨论】：

这样一个简单任务的三个要素 = 矫枉过正！
您有权发表自己的意见。事实上，它使样式变得非常简单和灵活。

【解决方案5】：

将溢出隐藏添加到框和您的内部内容位置绝对+右下

<div class="box">
            <span>i</span>
</div>

.box {
    background-color: green;
    width: 200px;
    height: 100px;
    position: relative;
    overflow:hidden;
}

.box span {
    background-color: white;
    border-top-left-radius: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    line-height:30px;
    text-align:center;
}

【讨论】：

【解决方案6】：

要获得右下角倒置边框半径的框的形状，请执行以下操作：

div {
    width: 300px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
div:before {
    content:' ';    // fills div
    position:absolute;
    width:80px;   // width, height, top, left
    height:80px;  // are attributes of inverted
    top:70px;     // border-radius
    left:250px;
    border-radius:100%;
    box-shadow:0 0 0 1000px green; // box shadow creates the illusion
}                                  // of inverted border-radius

这是小提琴http://jsfiddle.net/L71euu59/

通过使用 div:before 的 height、width、top、left 属性，您可以调整border-radius 的大小并将其重新定位到您喜欢的 div 的任何角落。

【讨论】：

【解决方案7】：

这里是另一个解决方案:)

#logo {
  width:110px;
  height:72px;
  background-color:#1bc706 ;
  position:relative;
  overflow:hidden;
}
#logo:after{
  content:"i";
  font-family:courier;
  font-weight:bolder;
  text-indent:-13px;
  line-height:10px;
  position:absolute;
  bottom:-15px;
  right:-15px;
  color:#1bc706 ;
  background-color:#fff;
  width:10px;
  height:25px;
  padding-left:25px;
  border-radius:100px;
  padding-top:10px;
}

&lt;div id="logo"&gt;&lt;/div&gt;

【讨论】：

【解决方案8】：

您应该取一个 DIV 并在其中创建另一个 DIV 将内部的 DIV 位置与最右下角对齐，并根据需要设置其左上边框。改变它的背景颜色，你就会得到你的图像。

【讨论】：