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

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

【问题讨论】:

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

标签: html css css-shapes


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

或者你可以使用svgclipPath

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: 0right: 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: hiddenposition: 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 位置与最右下角对齐,并根据需要设置其左上边框。改变它的背景颜色,你就会得到你的图像。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2020-11-08
          • 1970-01-01
          • 1970-01-01
          • 2020-03-25
          • 2019-06-15
          • 1970-01-01
          • 2016-02-01
          相关资源
          最近更新 更多