CSS边界角落向后弯曲

Question

如何仅使用html和css

制作下图

Answer 1

您可以使用:after：伪元素与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;
}

<div></div>

---

您可以使用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);
}

<div>i</div>

---

或者您可以使用svg的{​​{1}}。

clipPath

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

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

Answer 3

使用overflow: hidden

在伪元素上使用position: relative和position: absolute在父级上使用border-radius: 50%

＆＃13;

＆＃13;

: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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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

Answer 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;
}

Answer 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的高度，宽度，顶部，左侧属性：之前，您可以调整边框半径并将其重新定位到您喜欢的div的任何一个角落。

Answer 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;
}

<div id="logo"></div>

Answer 8

你应该使用一个DIV并在其内部创建另一个DIV对齐内部的DIV位置到大多数右下方并根据需要制作其左上边框。更改背景颜色，您将获得图像。