如何创建多边形形状的div
我想在这里创建像图像一样的 HTML 元素: 一个问题是 DIV 元素具有多边形形状而不是常规矩形，将作为弹出窗口之类的东西放置在其他元素上方，并且在该元素内部，需要在源中显示矩形形状的图像，但在网络上显示如填充所有空格包括左侧的三角形. 您认为有没有可能在不将显示的图像准备为正确多边形格式的透明 PNG 的情况下意识到这一点?只能通过 CSS3 转换还是使用 canvas 或 SVG
..
css-shapes相关内容
同心圆与 CSS
有谁知道如何仅使用 CSS 绘制同心圆，例如 RAF 符号(同心圆的红色、白色和蓝色圆圈)? 解决方案 你可以用 : 制作 3 个同心圆 一个元素 border-radius:50%; 使形状变圆 padding 和 background-clip:content-box; 用于红色和蓝色圆圈之间的白色间隙 蓝色外圈的边框 div{宽度:80px；高度:80px；边界半径:
..
悬停并单击 CSS 三角形
我有一个带有 javascript 函数的三角形，可以移动该图像. 问题是元素有一个正方形，所以点击和悬停状态在三角形的外面触发(见下图中的红色部分): 如何防止在三角形外部悬停和单击，并仅在三角形内部允许单击/悬停状态? 解决方案 为了防止在 CSS 三角形外悬停和点击，您可以使用变换来制作三角形. 此处描述了此技术:具有变换旋转的 CSS 三角形 关键是使用带有
..
使用 CSS 创建对角线/部分/边框
我正在尝试在网页上创建一条对角线，作为分节/分节符.这本质上是一个分色部分.我不能使用图像，好像页面被放大了，图像会像素化.所以我需要能够直接在div的底部绘制一条对角线，如下图所示. 我曾尝试使用边框，但是我无法将实际中断点放在中间，而不是右侧或左侧. 有没有办法在 CSS 中绘制对角线?如您所见，我需要创建一个 90 像素高的 div，并在该 div 中有分割线/对角线.然后我可以
..
带有插入曲线和透明背景的 CSS 形状
我需要创建一个像这张图片一样的 CSS 形状.. 请检查我的作品fiddle我已经创造了类似的东西，但我不能给它一个曲线. #shape {左边框:70px 实心透明；边框顶部:100px 纯红色；高度:0；宽度:200px；} 有人可以帮我吗? 解决方案 您可以使用带有 border-radius 和 background-shadows 的伪元素来创建曲线并为曲线启用透明背景
..
进度条由实线组成，以点为步骤
我正在尝试创建一个垂直进度条，在一条实线上有 8 个点(最后是第 8 个点)，其中每个点代表过程中的一个步骤.见附截图(在底部防止这个问题会被打破). 当然，我尝试用 HTML 和 CSS 制作一些东西，你可以在 this fiddle 中看到(代码如下).这样做的问题是，我无法找到一种方法来在浅绿色线上创建 7 个点，而无需再添加 8 个 div(8 个 div，因为第一个也必须在那里).
..
加水动画
我正在尝试制作一个擦拭动画，使圆圈看起来它在装满水.我遇到了两个错误，甚至无法解决第三个错误: 它填错了 填充后会重置为空(黑色) * 目前，我正在使用 标签，但我想将此效果移动到 body { background-image: } 并且需要一些指导关于如何做到这一点. 到目前为止我尝试过的: #banner {宽度:300px；高度:300px；位置:相对；}#banne
..
如何在 HTML 中创建泪珠?
如何创建这样的形状以显示在网页上? 我不想使用图像，因为它们在缩放时会变得模糊 我尝试过 CSS: .tear {显示:内联块；变换:旋转(-30度)；边框:5px纯绿色；宽度:50px；高度:100px；边框左上角半径:50%；边框左下角半径:50%；边框右下角半径:50%；} 结果真的很糟糕. 然后我尝试使用 SVG:
..
底部带有三角形的 div 和背景图像
我想做一个div，底部有一个三角形.但是我需要出现三角形上的背景图像，我尝试使用伪元素 (:after) 但它不起作用. #homebg:after{内容:'';位置:绝对；顶部:100%；左:0；右:0；边距:0 自动；宽度:0；高度:0；边框顶部:实心 50px #fff;左边框:实心 48vw 透明；右边框:实心 48vw 透明；} 我需要使 div 看起来像这张图片中的 backgro
..
创建具有 24 或更高点突发的“新"尖刺标签
我正在尝试制作一个像下图这样的点爆裂的东西: 目前，我已尝试使用伪元素进行此操作，但是，我只能生成 12 点连拍，并不能反映图像中显示的连拍. 有没有办法创建一个只有几个元素的点阵? 以下是我用来尝试此解决方案的代码: div{宽度:100px；高度:100px；背景:灰色；变换:旋转(45度)；边距:50px；}div:之后{位置:绝对；内容:"";背景:灰色；宽度:10
..
概述和部分填充 SVG 形状
我这里有一个 jsfiddle - http://jsfiddle.net/apbuc773/ 我想用 svg 创建一颗星星. 我想抚摸星星的外面.在我的示例中，描边位于剖析内部形状的每一行上. 也可以将星形填充一半. 我想用它来评价星级，但我需要一半甚至四分之一的填充物.
..
带背景图像的三角形
我正在做一个项目，需要两个三角形来保存背景图像，并作为链接. 这是我想要的两个三角形的模型. 目前，我只有两个跨越 900x600 的 div，每个三角形作为背景图像.我现在遇到的问题是我无法将鼠标悬停在 Cinema div 的透明部分上以到达照片 div. 我可以用 css3 三角形完成这个设计并设置它们的背景图像吗?我一直认为自定义形状是由边框组成的，带有边框颜色.
..
波浪(或形状?)在 CSS3 上有边框
我需要用CSS3实现一个波浪形，我尝试用CSS3 Shapes来实现，但没有达到预期的效果. * {边距:0；填充:0；}身体 {背景:#007FC1；}.容器，.控制板 {边框底部:4px 实心 #B4CAD8;}.容器 {背景色:#fff;}.container >.文本 {填充:0.5em；}.控制板 {位置:相对；浮动:对；宽度:200px；高度:40px；边距顶部:-4px；背景色
..
html/css 六边形，里面有图片
是否有机会将图像放置在六边形形状内?我习惯于html中的六角形单元格，但我无法理解填充了(背景?)图像. 这是我尝试过的: .top {高度:0；宽度:0；显示:块；边框:20px纯红色；边框顶部颜色:透明；边框右色:透明；边框底色:红色；边框左颜色:透明；}.中间 {高度:20px；背景:红色；宽度:40px；显示:块；}.底部 {高度:0；宽度:0；显示:块；边框:20px纯红色；
..
响应式 CSS 梯形形状
我希望创建一个响应式梯形形状，它可以是 CSS、SVG 或 Canvas. 我已经能够创建三角形，但不能创建具有响应性的梯形. div {宽度:0；高度:0；边框顶部:5vw 实心透明；左边框:10vw 纯红色；边框底部:5vw 实心透明；}
我已经看到很多关于 SO 的问题都包含梯形形状，但很少有理由说明它们比其他方法更好，而且大多数没有响应. 例如
..
具有两个圆形边的 CSS 透明弯曲形状
我正在尝试创建内部弯曲的透明形状，就像这样 但是我在创建这种弯曲形状时遇到了麻烦，这就是我所做的` body {背景色:#00a4ffb3；}.parent_wrapper {高度:250px；宽度:250px；位置:相对；背景颜色:白色；}.tab 指示器 {位置:绝对；背景色:#000000；宽度:50px；高度:60px；边框半径:50px 0 0 50px；z-索引:1；变换:
..
透明的空心或切出的圆形
是否可以仅使用 CSS剪出一个空心圆? 我们都可以做到: 但是我们可以这样做吗? 圆圈必须是空心和透明的.因此，在 div 上放置一个纯色圆圈并不能解决问题. 解决方案 您可以使用 2 种不同的技术来实现透明切出的圆 : 1.SVG 以下示例使用 内嵌 svg.第一个片段使用 mask 元素 来切出透明圆圈，第二个片段使用空心圆由路径元素构成.这个圆圈是用 2
..
在 CSS 中反转圆角?
我有一个 css 代码: -moz-border-radius-topleft:50px; 我得到了结果: 有没有可能像这样给出: 解决方案 在现代浏览器中，你可以使用 mask-image: #aux-container {宽度:100px；高度:100px；背景:#f00；-webkit-mask-image: 径向渐变(0 0 处的圆形 10px，透明 0，透明 20
..
如何在边框侧创建带有链接的圆圈
我正在尝试制作一个像this这样的圆圈.我能够在小提琴中制作它，但问题是我需要每个橙色边都是一个链接，而我不能用边框来做.如果有人能帮助我解决这个问题，我将不胜感激. #circle {宽度:200px；高度:200px；边界半径:50%；背景:绿色；}#incircle {宽度:100px；高度:100px；边界半径:50%；边框:50px 虚线橙色；}
..
我可以创建一个底部弯曲的 div 吗?
首页
..