相关疑难解决方法(0)

是否可以使用border-radius的CSS Arch？

我正在尝试使用CSS创建一个拱门.我已经研究了各种" 插入边界半径 "问题,但它们都展示了如何嵌入角落,而不是对象的中间部分.

我正在寻找一种方法来反转对象的中间以创建像桥梁一样的拱形.

其中包括一个示例图像,以显示我正在尝试实现的那种事情. 在此输入图像描述

编辑:

这个拱门的一个重要部分是它将被放置在其他对象上.简单地说出来并不是一个解决方案,而只是一个临时的黑客攻击.有关详细信息,请参见下图.

在此输入图像描述

html css css3 css-shapes

pap*_*ppy

2017 05-23

6
推荐指数

1
解决办法

5672
查看次数

边角形状勺不起作用

我想使用border-corner-shape属性实现以下形状.但它不起作用.

在此输入图像描述

我的代码如下:

.left-1 {
   background-color: #3498DB;
   border-corner-shape: scoop;
   border-radius: 30px;
   width: 200px;
   height: 200px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="left-1"></div>

Run Code Online (Sandbox Code Playgroud)

为什么不起作用？

html css border css3 css-shapes

Meh*_*ray

2015 08-07

5
推荐指数

3
解决办法

8026
查看次数

是否可以通过CSS3实现向内弯曲的边界半径？

是否有可能实现如上图所示的效果？到目前为止，我已经尝试过以下代码。

.greyParent {
  height: 19px;
  border-radius: 7px;
  background: rgb(196, 196, 196);
}
.greyParent > .activeSlide {
  background: rgb(0, 97, 188);
  border-radius: 7px;
  border-right: 1px solid #fff;
  float: left;
  width: 20%;
  height: 19px;
  position: absolute;
}
.greyParent > .activeSlide:first-child {
  left: 0%;
  z-index: 5;
}
.greyParent > .activeSlide + .activeSlide {
  left: 16%;
  z-index: 4;
}

Run Code Online (Sandbox Code Playgroud)

<div class="col-xs-4 col-sm-2 col-md-2">
  <span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
  <div class="greyParent">
    <div class="activeSlide">

    </div>
    <div class="activeSlide">

    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

我需要根据选项卡附加 .activeSlide div …

html css css-shapes

SsN*_*bie

2017 01-10

5
推荐指数

1
解决办法

108
查看次数