问题标签 [css-shapes]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
10 回答
235685 浏览

css - 控制虚线边框笔划长度和笔划之间的距离

是否可以在 CSS 中控制虚线边框笔划之间的长度和距离?

下面的示例在浏览器之间显示不同:

重大差异:IE 11 / Firefox / Chrome

IE 11 边框火狐边框镀铬边框

是否有任何方法可以更好地控制虚线边框的外观?

0 投票
5 回答
12769 浏览

css - CSS3 倒圆角

有没有办法在 CSS3 中做一个倒圆角,类似于下面(粗略)图中的左下角?

也许边界半径可以与这种技术相结合?

编辑:我不是在寻找气泡,而只是一种弯曲左下角点右侧的方法。

0 投票
3 回答
21355 浏览

css - html中的六边形单元格

有没有办法设计一个六边形网格的 html 块?类似于蜂巢。这看起来更像是一个 CSS 样式任务。

0 投票
8 回答
182966 浏览

html - 如何仅使用 CSS 创建一个圆形或方形 - 中心是空心的?

它应该基本上是正方形或圆形的轮廓 - 我可以相应地设置样式(即,将颜色更改为我想要的任何颜色,更改边框的粗细等)

我想将那个圆圈或正方形应用到其他东西上(比如图像或其他东西),中间部分应该被挖空,这样你就可以看到正方形或圆圈下面的图像。

我希望它主要是 CSS + HTML。

0 投票
4 回答
4209 浏览

jquery - 多形 CSS 层 \ 非矩形 CSS 层

是否可以使 CSS 图层的形状如下图所示...

替代文字

我知道我们可以拥有这种形状的图像,并且具有透明背景,我们可以拥有像这些形状的图层......但我不希望 CSS 图层具有像这些形状这样的实际边框......有没有办法 CSS、jQuery 或任何东西...... .

注意:“像这样的形状我的意思不仅仅是这三个例子,而是我可以定义的形状”

0 投票
11 回答
49744 浏览

css - 在CSS中反转圆角?

我有一个CSS代码:

我得到结果:

圆角

有没有可能给这样的:

倒圆角

0 投票
4 回答
70732 浏览

html - 45 度角 + 盒子阴影 - 只使用 CSS

我只需要重新创建以下设计CSS

图片

您在图片中看到的是网站容器的顶部——“链接”是主菜单的一部分。

就目前而言,我已经创建了容器,但我不确定如何在不使用图像的情况下使导航倾斜。

作为记录:我宁愿不使用图像,因为倾斜的盒子阴影与浏览器渲染的盒子阴影相匹配的机会微乎其微,尤其是在涉及多个浏览器时。

我正在考虑具有白色背景和框阴影的定位和旋转 div,但我还没有能够构建它。

有任何想法吗?

0 投票
6 回答
7464 浏览

html - CSS在两个元素之间创建弯角?

我的 UI 左侧有一个无序列表。选择列表项后,div其右侧会出现 a。我想要一个弯曲的外角,在那里<li><div>相遇。有人称之为负边界半径倒角。请参见下图中的白色箭头。

示例图像

为了将蓝色延伸<li>到边缘<ul>,我打算做这样的事情:

有没有更好的方法将 延伸<li>到边缘<ul>?显然,我还将包括 webkit 和 mozilla 边框半径 CSS。

我不确定的主要是active右下角下方的外角<li>。我有一些想法,但它们看起来像黑客。有什么建议么?

请注意,<ul>它以灰色表示,但在实际设计中它将是白色的。另外,我打算在选择<div>an 时使用 Javascript 来正确定位<li>

0 投票
5 回答
7226 浏览

html - 帮助创建带有弯曲标题部分的 HTML 页面

我想知道,创建一个顶部标题部分似乎是斜面的网页的最佳方法是什么(使用 html、css 和图形),而不是直接交叉?请参阅下图作为示例:

替代文字

我不确定如何使用图像以使它们根据不同的浏览器尺寸/分辨率进行扩展/收缩...

谁能给我一些帮助?或者也许指向我一个资源?

谢谢!

0 投票
5 回答
141650 浏览

css - 在 CSS 中以圆形垂直和水平居中文本(如 iphone 通知徽章)

我正在寻找一种在 CSS3 中制作类似 iphone 的跨浏览器徽章的方法。我显然想为此使用一个 div,但替代解决方案会很好。重要的因素是它需要在所有浏览器中水平和垂直居中。

关于这些通知的一个有趣的设计问题是它们不能具有指定的宽度(高度是固定的)——它们应该能够处理 [在 ascii 绘图中] (1) 和 (1000),其中 (1000) 不是一个完美的圆形,但看起来更像是一个胶囊。

编辑:附加约束(来自史蒂文):

  • 没有 JavaScript
  • 没有将显示属性修改为表格单元格,这是有问题的支持状态