标签: css-shapes

如何创建仅包含HTML和CSS的圆形箭头？

我正在尝试使用CSS和HTML创建一个圆形方向箭头.以下是我的尝试.

尝试1

在这里我旋转了<div>箭头,但两者都处于不同的位置.

这是CSS:

 #curves div {
   width: 100px;
   height: 100px;
   border: 5px solid #999;
 }
 #curves.width div {
   border-color: transparent transparent transparent #999;
 }
 #curve1 {
   -moz-border-radius: 50px 0 0 50px;
   border-radius: 50px 0 0 50px;
 }
 .arrow-right {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 27px solid #ccc;
   float: right;
   margin-top: -7px;
   margin-right: -26px;
 }

Run Code Online (Sandbox Code Playgroud)

<div id="curves" class="width">
  <div id="curve1"></div><span class="arrow-right"></span>
</div>

Run Code Online (Sandbox Code Playgroud)

尝试2

在这个我创建的箭头是直的.

.container {
  width: 60%;
  height: 9px; …

Run Code Online (Sandbox Code Playgroud)

html css css-shapes

Man*_*mar

2015 05-06

45
推荐指数

5
解决办法

9681
查看次数

用CSS在div背景中绘制对角线

我有div预览框

HTML:

<div class="preview-content">PREVIEW</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

.preview-content {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
    width: 100%;
    min-height: 300px;
    max-height: 300px;
    line-height: 300px;
    text-align: center;
    vertical-align: middle;
     font-size: 2em;
}

Run Code Online (Sandbox Code Playgroud)

问:如何将对角线添加到div背景中,如图中所示

注意:尽可能使用CSS

先感谢您

css background line diagonal css-shapes

Ing*_*dak

2019 07-08

44
推荐指数

7
解决办法

15万
查看次数

如何使用CSS分割不同颜色的圆圈

我希望能够绘制它的一个片段另一种颜色的圆圈,我想覆盖到能够在增量增加段的数量10%从0%到100%.

Google上的所有示例都是所有行业而不是细分市场

到目前为止,这是我能够提出的最好的:

div.outerClass {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 2.5px;
    overflow: hidden;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

div.innerClass {
    width: 10px;
    height: 10px;
    border: 5px solid green;
    border-radius: 36px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="outerClass">
    <div class="innerClass"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

0%,50%和100%我都可以做.

html css svg css3 css-shapes

Gre*_*reg

2015 11-24

44
推荐指数

4
解决办法

6248
查看次数

如何用随机锯齿获得撕裂的纸张效果？

我试图制作撕碎的纸张效果,如下图所示:

底部撕裂的效果.我看到了这个并且能够产生撕裂的纸张效果,如下所示

.box {
  width: 300px;
  height: 150px;
  background: darkred;
  position: relative;
  display: inline-block;
}
.box:after {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  background: darkred;
  left: 0;
  bottom: 0;
  box-shadow: 15px -15px 0 0 darkred, 30px -30px 0 0 darkred, 45px -45px 0 0 darkred, 60px -60px 0 0 darkred, 75px -75px 0 0 darkred, 90px -90px 0 0 darkred, 105px -105px 0 0 darkred, 120px -120px 0 0 darkred, 135px …

Run Code Online (Sandbox Code Playgroud)

html css svg css3 css-shapes

Aks*_*hay

2015 11-13

44
推荐指数

3
解决办法

6323
查看次数

方形DIV,其中高度等于视口

我需要创建一个DIV,其中width=height和height=100%视口(显然,它是可变的).

换句话说,一个完美的方形DIV,它根据视口的高度计算它的尺寸.该DIV中的元素将其尺寸作为父DIV的高度和宽度的百分比.

在我看来,在CSS中这应该很简单,但我已经坚持了!任何指针都将非常感激.

html css aspect-ratio css-shapes

Ila*_*Ila

2015 10-14

43
推荐指数

3
解决办法

5万
查看次数

是否可以使用CSS创建此形状(两个部分圆连接在一起)？

我试图用CSS完成两个div的边框:

我尝试过使用border-radius,但两个部分圆圈没有压在一起:http://jsfiddle.net/uwz6L79w/

 .left {
   position: absolute;
   left: 0;
   top: 0;
   width: 100px;
   height: 100px;
   border-width: 4px;
   border-color: black white black black;
   border-style: solid;
   border-radius: 60px
 }
 .right {
   position: absolute;
   left: 104px;
   top: 0;
   width: 100px;
   height: 100px;
   border-width: 4px;
   border-color: black black black white;
   border-style: solid;
   border-radius: 60px;
 }

Run Code Online (Sandbox Code Playgroud)

<div class="left"></div>
<div class="right"></div>

Run Code Online (Sandbox Code Playgroud)

我可以进一步将它们压在一起,但我必须让另一个div重叠,如下所示:http://jsfiddle.net/uwz6L79w/1/.

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  border-width: 4px;
  border-color: black …

Run Code Online (Sandbox Code Playgroud)

html css html5 css3 css-shapes

Joe*_*ano

2015 12-22

42
推荐指数

4
解决办法

3859
查看次数

CSS - 仅显示角落边框

我想知道在CSS或Jquery中是否可以创建边框但仅限于角落.像这样的东西:

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****

Run Code Online (Sandbox Code Playgroud)

css jquery border css3 css-shapes

pie*_*tin

2016 05-03

41
推荐指数

8
解决办法

4万
查看次数