用斜线分隔 2 个 div
我想用斜线分隔 2 个浮动 div，它们有不同的背景颜色. 这里的例子: HTML 标记:
我已经尝试旋转它们(正如您在 jsFiddle 中看到的那样): #wrap div {-moz 变换:旋转(20 度)；-ms 变换:旋转(20 度)；-o-变换:旋
..
css-shapes相关内容
使用CSS在div背景中绘制对角线
我有一个用于预览框的 div: HTML:
PREVIEW CSS: .preview-content {背景:url(数据:图像/png；base64，iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDB
..
如何使这个 CSS 汉堡菜单完全可点击?
我正在研究一个纯 CSS 汉堡菜单图标，到目前为止，它运行良好，只是线条之间的间隙不可点击.如何修改此代码以使整个按钮都可点击，而不仅仅是线条? .菜单 {宽度:30px；高度:5px；背景色:#000；位置:相对；显示:内联块；}.menu:after, .menu:before {内容: '';宽度:100%；高度:5px；背景色:#000；位置:绝对；}.菜单:{顶部:10px；左
..
带有倒圆角的 css3 菜单
我设计了一个导航菜单，看起来像这里的图片: 我想用 css3 圆角和框阴影对其进行编码，而不是使用任何图像.问题是第一个菜单项左侧的圆角，以及菜单右侧的圆角...我称之为“反向"圆角... 它应该在 :hover 上改变颜色. 有什么办法可以只在 css 中完成?以及如何? 解决方案 HTML
..
带有“3D"的功能区影响
我的菜单有以下代码: HTML:
首页
page1
page2
和 CSS: .wrapper{填充:20px；背景:#d3d3d3;高度:200px；}.菜单{背景:#7F7979;}.
..
如何创建弯曲 &CSS 中的重叠菜单选项卡
我想做一个菜单，其中菜单的末端重叠，它们有弯曲的边框和略微倾斜的边缘. 不使用背景图片，是否可以只用CSS做这样的菜单? 为了更好的理解，附上了下面的菜单示例.想知道如何单独使用CSS制作红色标记的部分. 请帮忙，提前致谢. 解决方案 倾斜 :before 和 :after 伪元素， 将伪代码设置为一些 - 偏移 将左上的 border-radius 添加到 :b
..
进度圆 - 在圆的末端画一个小圆弧 + 更多
如何在进度圆的末端画一个小圆，并在其下方/上方添加一个小文本块? 示例 img:
..
如何用css创建立方体窗口?
我在网上找到了这张图片，并尝试用 css 创建这些盒子.我失败了.有谁知道如何解决这个问题? 这是我的代码.问题是左边的栏: .box {位置:相对；边距:10px；显示:内联块；}.内容 {边框顶部:2px 纯红色；右边框:2px 纯红色；填充:5px；}.box:之前{内容: '';位置:绝对；顶部:0；左:-10px；高度:100%；宽度:10px；背景颜色:红色；变换:倾斜(-
..
响应式菱形网格
我有一些正方形(正方形旋转 45° 看起来像钻石)，我想用它们来组成一个大菱形，中间有一颗红色菱形. 我自己组织钻石时遇到问题，href 似乎失败了. 如何在规则网格中放置响应式菱形? 她是我的代码: body {背景:黑色；颜色:#000000；字体:13px 格鲁吉亚，衬线；行高:1.4；字体粗细:更轻；文本渲染:优化易读性；}#钻石 {宽度:0；高度:0；边框:50p
..
使用 CSS 创建响应式三角形
我今天试图在 CSS 中为响应式网站创建三角形，但在 stackoverflow 上找不到一个很好的例子，所以我是这样做的. 解决方案 使 Angular 形状响应式有点棘手，因为你不能在 CSS 中使用百分比作为 border 值，所以我写了一个耦合函数来计算页面宽度并相应地调整三角形的大小.第一个在加载页面时计算大小，第二个在页面宽度变化时重新计算大小. CSS: .trian
..
具有渐变响应的背景
我有以下代码:(Fiddle) body {背景颜色:红色；}#grad1 {高度:100px；宽度:100%；背景:线性梯度(521deg, rgba(138, 138, 138, 0) 50%, rgba(138, 138, 138, 0) 31.9%, #fff 0.1%, #fff 0%);}
我基本上希望宽度具有响应性，并且即使宽度
..
div 全宽底部的中心三角形响应
经过数小时的 CSS 尝试(抱歉，我仍然是 CSS 菜鸟)，我向您寻求帮助: 我想要一个三角形作为 div 的“底部"，同时填充整个屏幕宽度，无论屏幕尺寸是多少(100%). 当窗口调整大小时，我只希望三角形改变它的宽度，以便它仍然填充整个屏幕宽度(100%)而不是它的高度. 目前整个事情看起来像这样(三角形黑色仅用于演示目的)从外观来看是我想要实现的: 我的代码如下: .top
..
具有居中内容的响应式圆圈
有没有办法做到以下几点: #id {边框半径:100px；宽度:100px；高度:100px；}
你好
一个圆形div，文本垂直和水平居中.同时保持圈子的响应. 我的意思是说 width 包含 div 的 50%，同时保持 height> 百分比等于圆. 并将静态 100px 更改为 pertentages 使圆形成为椭圆形. 解决方案 视口单位
..
响应式 CSS 圆圈
目标: 响应式 CSS 圆圈: 等半径缩放. 半径可以按百分比计算. 半径可以通过媒体查询进行控制. 如果解决方案是javascript，我仍然需要模拟媒体查询触发器.我不需要“媒体查询"，但我确实希望能够在某些宽度下按百分比控制半径: @media (max-width : 320px){.x2{填充:50%;}}@media (min-width : 321px) 和
..
背景图像，线性渐变锯齿状边缘结果需要平滑边缘
我正在尝试使图像的底部变尖.我试图通过在底部产生两个三角形来获得这种效果.他们必须有反应.在互联网上搜索了很多不符合我要求的示例后，这是迄今为止我设法制作的最好的示例. body,html {高度:100%}.图片 {宽度:1410px；右边距:自动；左边距:自动；高度:500px；溢出:隐藏；位置:相对；}.指针{高度:50px；位置:绝对；底部:0；左:0；宽度:100%；}.trian
..
具有百分比宽度的响应式 CSS 三角形
下面的代码将在 元素正下方创建一个箭头: JSFiddle .btn {位置:相对；显示:内联块；宽度:100px；高度:50px；文本对齐:居中；白颜色;背景:灰色；行高:50px；文字装饰:无；}.btn:在{之后内容: "";位置:绝对；底部:-10px；左:0；宽度:0；高度:0；边框宽度:10px 50px 0 50px；边框样式:实心；边框颜色:灰色透明透明透明；} 你好
..
如何为网页上的文本绘制设置动画?
我想要一个有一个中心词的网页. 我希望用动画绘制这个词，以便页面以与我们相同的方式“写出"这个词，即它从一个点开始，随着时间的推移绘制线条和曲线，最终结果是一个字形. 我不在乎这是用 还是 DOM 完成的，我不在乎它是用 JavaScript 还是 CSS 完成的.没有 jQuery 会很好，但不是必需的. 我该怎么做?我已经彻底搜索，但没有运气. 解决方案 我想用动
..
悬停时从中心填充元素
如何创建一个按钮，以便悬停时背景颜色从中心向元素的左侧和右侧填充元素. 示例: 我知道如何使用 CSS3 transitions 并且可以让它动画成所需的形状，但不能让它从中心向外过渡. 形状不会改变大小我只想使用 transition 填充它. 解决方案 另一种实现类似效果的方法是使用 linear-gradient 作为 background-image，将图像放置在
..
div 向 2 个方向倾斜
是否可以在 CSS 中创建以下形状作为 DIV. 浏览器支持并不重要. 解决方案 你不能像这样直接倾斜一个元素，你需要使用两个元素(或生成的内容)并隐藏某些溢出来使底部边缘平坦: http://jsfiddle.net/6DQUY/1/ #skew {高度:240px；溢出:隐藏；}.skew {背景:#000；显示:内联块；高度:300px；宽度:500px；边距顶部:10
..
圆形加载动画
我正在尝试创建 Apple 的 OS X 圆圈加载动画. 到目前为止我尝试过的: .animation-wrapper {宽度:200px；高度:200px；边框:1px纯黑色；边界半径:50%；位置:相对；溢出:隐藏；过滤器:亮度(0.8)；-webkit-过滤器:亮度(0.8)；}.pie-piece1 {位置:绝对；宽度:50%；高度:50%；底部:0；左:0；背景:线性梯度(向
..