Questions tagged «css-shapes»

我正在尝试创建如下图所示的形状，仅在一侧（例如，底侧）上有一个倾斜的边缘，而其他边缘保持笔直。 我尝试使用border方法（下面给出了代码），但是形状的尺寸是动态的，因此无法使用此方法。 .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape"> Some content </div> 运行代码段隐藏结果展开摘要 我也尝试过使用渐变作为背景（例如下面的代码），但是随着尺寸的变化，它变得混乱了。您可以将鼠标悬停在以下代码段的形状上，以了解我的意思。 显示代码段 .gradient { display: inline-block; …

90 html  css  responsive-design  css-shapes 

我刚刚遇到了一个简洁的CSS技巧。看看小提琴... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } <div>Cool Trick: <br /> <div class="tooltiptail"></div> </div> <br /> <div>How do I get this effect with only CSS? <br /> …

89 css  tooltip  css-shapes 

我正在尝试使用CSS重新创建此图像： 我不需要重复。这是我开始的，但是只有一条直线： #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } <div id="wave"></div> 运行代码段隐藏结果展开摘要

80 css  css-shapes 

因此，我需要使用CSS制作重复的六角形图案。如果需要图像，我可以去那里，但如果可能的话，我宁愿只使用CSS。 这是我要创建的内容的想法： 基本上，我只需要一种创建六边形形状的方法，然后将文本/图像覆盖在它们之上。我还没有太多代码，因为我不太确定从哪里开始。问题是，我可以只使用<div>六角形的s，如（http://css-tricks.com/examples/ShapesOfCSS/）所示，但是这样它们就不会连接了。我可以使用重复的六边形图案，但无法指定特定形状的文本或图像的确切位置。感谢您的任何提前帮助。

79 html  css  css-shapes 

使用Stack Overflow进行CSS叠加：？？？？？？ 好吧，用纯​​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 <= …

77 css  css-shapes 

我正在尝试使用CSS创建一个圆，如下图所示： ...只有一个div： <div class="myCircle"></div> 并仅使用CSS定义。不允许使用SVG，WebGL，DirectX等。 我试图绘制一个完整的圆，然后将另一个圆与另一个圆淡化div，它确实起作用，但是我正在寻找一种更优雅的选择。

73 html  css  css-shapes 

是否可以仅使用CSS复制此图像？ 我想将其应用于菜单，因此棕色背景出现在hover实例上 我不知道该怎么做，我只有。 .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; }

73 css  css-shapes 

是否可以仅使用CSS切出空心圆？ 我们都可以做到： 但是，我们可以这样做吗？ 该圆必须是空心且透明的。因此，不能通过将纯色圆圈放在上来解决问题div。

71 css  svg  transparency  css-shapes 

Наэтотвопросестьответына堆栈溢出нарусском：Создайтедизайнмолнии 我正在尝试在CSS中从Flash（DC漫画）（或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 …

69 html  css  svg  css-shapes