标签: css-shapes

好吧,用纯​​CSS绘制一个圆圈很容易.

.circle {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 3px solid black;
    background-color: green;
}

我如何绘制一个扇区？给定度X [0-360]我想画一个X度扇区.我可以用纯CSS做到吗？

例如:

谢谢+示例

谢谢乔纳森,我使用了第一种方法.如果它帮助某人这里是一个JQuery函数的例子,它获得百分比并绘制一个扇区.该扇区位于百分比圆圈后面,此示例显示如何从起始角度围绕圆圈实现圆弧.

$(function drawSector() {
  var activeBorder = $("#activeBorder");
  var prec = activeBorder.children().children().text();
  if (prec > 100)
    prec = 100;
  var deg = prec * 3.6;
  if (deg <= 180) {
    activeBorder.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  } else {
    activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC …

我试图在CSS中重新制作闪电符号(DC Comics)(或Big Bang Theory的Sheldon Cooper 所穿的T恤).

这将像星级评级系统,只是一个"闪电评级系统".

但是,因为我试图将HTML保持在最低限度,所以我只想在CSS中设置这个样式.

我到了以下阶段:

html,
body {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
.wrap {
  height: 50vw;
  width: 50vw;
  position: relative;
  margin: 0 auto;
}
.circ:hover{
  background:gray;
  }
.circ:hover .bolt{
  background:gold;
  }
.circ {
  height: 50%;
  width: 50%;
  background: white;
  border: 5px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:0 0 10px 2px black; …

我正在尝试使用CSS重新创建此图像:

我不需要重复.这就是我的开始,但它只是一条直线:

#wave {
  position: absolute;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

<div id="wave"></div>

我用过border-radius: 50%或者border-radius: 999em,但问题是一样的:平方图像没有问题,但是对于矩形图像,我得到一个椭圆形圆圈.我也准备裁剪图像的一部分(显然).有没有办法用纯CSS(或至少JavaScript/jQuery)来做到这一点,而不使用<div>a background-image,但只使用<img>标签？

是否可以仅使用CSS重现此图像？

我想将它应用到我的菜单中,因此棕色背景出现在hover实例上

我不知道怎么做,我只有;

.menu li a:hover{
     display:block;
     background:#1a0000;
     padding:6px 4px;
}

tl; dr: 我想用CSS创建一个实际的3D球体 - 而不仅仅是一种幻觉

注意:某些代码段示例没有响应.请全屏使用.

使用纯CSS,您可以创建和动画 三维立方体,如下所示:

#cube-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  perspective: 1500px;
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
    ;
  }
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid green 3px;
}

#front_face {
  transform: translateX(-100px) translateY(-100px) translateZ(100px);
  background: rgba(255, 0, 0, 0.5); …

像这样

只有这个代码

<span>1</span>

我想在CSS中创建这个重叠的圆形:

基本上,只是堆叠圆圈.我环顾四周,我看到的所有解决方案都包括使用多个div元素来实现此效果.但是,使用CSS3不能用一个div来完成吗？我看着它是如何轻松完成的,并且认为如果所有颜色都相同,你就会得到这样的药丸形状:

http://jsfiddle.net/5wytm0r4/

 #circles {
   background-color: red;
   width: 130px;
   height: 100px;
   border-radius: 50px;
 }

<div id="circles"></div>

然后简单地在其中绘制几个四分卫,你就完成了.但是,我无法弄清楚如何在我的胶囊形状的div中绘制这些月亮形状.

我试图通过一个擦拭动画来制作一个看起来像是充满水的圆圈.我遇到了两个错误,甚至无法解决第三个错误:

1. 它填补了错误的方式
2. 它填满后重置为空(黑色)*
3. 目前,我正在使用这些<img>标签,但我想将此效果移至body { background-image: }需要指导如何执行此操作.

到目前为止我尝试了什么:

#banner {
  width: 300px;
  height: 300px;
  position: relative;
}
#banner div {
  position: absolute;
}
#banner div:nth-child(2) {
  -webkit-animation: wipe 6s;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: up;
  -webkit-mask-size: 300px 3000px;
  -webkit-mask-position: 300px 300px;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)));
}
@-webkit-keyframes wipe …

我正在尝试使用CSS创建一个圆圈,它看起来与下图完全相同:

......只有一个div:

<div class="myCircle"></div>

并仅使用CSS定义.没有SVG,WebGL,DirectX,[...]允许.

我试图绘制一个完整的圆圈并将其中的一半淡化为另一个div,它确实有效,但我正在寻找更优雅的替代方案.