我可以选择一些正方形(正方形旋转了45°,看起来像钻石),我想用它们构成一个大的钻石形状和一个中心红色钻石。

我在组织钻石本身时遇到问题, href似乎失败了。

  • 如何将响应式菱形放置在规则网格中

她是我的密码

 body { background: black; color: #000000; font: 13px georgia, serif; line-height: 1.4; font-weight: lighter; text-rendering: optimizelegibility; } #diamond { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: white; position: relative; top: -50px; } #diamond:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: white; } #diamond_red { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #AA1C08; position: relative; top: -50px; } #diamond_red:after { content: ''; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: #AA1C08; } 
 <a class="navigation"> <center> <div id="diamond"></div> <div id="diamond"></div> <div id="diamond" href="/photos/"></div> <div id="diamond_red"></div> <div id="diamond" href="/projects/"></div> <div id="diamond"></div> <div id="diamond"></div> <div id="diamond" href="/archive/"></div> </center> </a> 

===============>>#1 票数:3 已采纳

diamons的响应式网格:

我认为您没有正确的方法来实现常规的自适应菱形网格布局 要简单得多:

这样,您就不必摆弄边框,伪元素( :after:before )并放置每个菱形。

这是一个响应示例

自适应菱形网格布局

它使用百分比宽度和底部填充来保持钻石的响应transform:rotate(45deg); 旋转整个网格并使它看起来像菱形网格:

 body{background:#000;} #big_diamond { width: 50%; margin:15% auto; overflow:hidden; transform: rotate(45deg); } .diamond { position: relative; float: left; width: 31.33%; padding-bottom: 31.33%; margin: 1%; background: #fff; transition:background-color .4s; } .diamond a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #red{background-color: #AA1C08;} .diamond:hover, #red:hover{background-color:darkorange;} 
 <div id="big_diamond"> <div class="diamond"><a href="https://twitter.com/"></a></div> <div class="diamond"><a href="https://twitter.com/"></a></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond" id="red"><a href="https://twitter.com/"></a></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> </div> 

正如其他人所提到的,您纠正了HTML中的一些错误,例如:ID必须是唯一的,并且href不能在div上使用。

===============>>#2 票数:2

您需要在第一个问题上更具体/更清楚。

首先,您多次使用ID “钻石”。 ID是唯一的,并且用于一个元素。 您应该为此使用类,而不是ID。

其次,您不能在div标签中使用href 您可以将divs包装在这样a标签中:

<a href="http://twitter.com/"><div class="diamond"></div></a>

或者,甚至更好,所以整个外形可点击就可以把a在内部div ,使a是100%的宽度和高度这样的块级元素:

<div class="diamond"><a href="http://google.com"></a></div>

div a{
    width: 100%;
    height: 100%;
    display: block;
}

JSFiddle示例: http//jsfiddle.net/kQj24/1/

===============>>#3 票数:0

对于不支持转换的浏览器,此html会退后,因为菱形变为正方形。 <div>元件可以被包裹在<a>使用而不改变任何现有的CSS规则此方法标记a 如果不支持转换,则square类中的文本也不会旋转。

<center>
    <div class="diamond">
        <div class="row">
            <a href="#"><div class="square"><p>Text</p></div></a>
            <a href="#"><div class="square"></div></a>
            <a href="#"><div class="square"><p>Text</p></div></a>
        </div>
        <div class="row">        
            <a href="#"><div class="square"><p>Text</p></div></a>
            <a href="#"><div class="square red"><p>Text</p></div></a>
            <a href="#"><div class="square"><p>Text</p></div></a>
        </div>
        <div class="row">        
            <a href="#"><div class="square"><p>More</p></div></a>
            <a href="#"><div class="square"></div></a>
            <a href="#"><div class="square"><p>Text</p></div></a>
        </div>
    </div>
</center>

CSS,使用您现有的身体规则:

.diamond {
    padding-top: 50px;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

.square {
    background-color: white;
    display: inline-block;
    height: 50px;
    overflow: hidden;
    width: 50px;
}

.square:hover {
    background-color: green;
}

.square p {
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

.red {
    background-color: red;
}

http://jsfiddle.net/5Q8qE/8/

  ask by redrubia translate from so

未解决问题?本站智能推荐:

3回复

侧面倾斜的形状(响应)

我试图创建一个如下图所示的形状,仅在一侧 (例如,底侧) 上有一个倾斜的边缘,而其他边缘保持笔直。 我尝试使用border方法(下面给出了代码),但是形状的尺寸是动态的,因此无法使用此方法。 .shape { position: relative; height: 100
2回复

以响应的宽度和高度将图像居中放置在另一个图像上

如何将图像居中放置在另一个图像上? 我尝试了许多类似问题的答案,但没有一个对我有用。 基本上我需要将2张图片变成1张 它必须是响应性的(因此,当不同屏幕尺寸的设备访问网页时,尺寸会自动更改。) 用户调整屏幕大小(或网页窗口大小等)时,心脏和环的位置应彼此保持相同
2回复

如何在响应式设计中保持比例?

jsfiddle的代码 我在容器div中包含了几个圆圈。 我正在使用百分比,因为我希望圆圈保持响应并根据屏幕大小放大。 我还希望这些圆圈保持圆形,而不是像我们在调整窗口大小时所做的那样变成椭圆形。 这显然是因为屏幕的宽度和高度很少相等,而且由于我选择的是百分比高度和宽度,这正是我应该
2回复

响应中心内容的圈子

有没有办法做到以下几点: #id { border-radius: 100px; width: 100px; height: 100px; } <div id="circle"> <h3>Hello</h3> </div>
4回复

响应圈子基于它的内容

我有这个例子JSFIDDLE包含一个圆圈,但我很难根据它的内容使其响应 ,在上面的例子中,当内容很长时,它会溢出圆圈。 我怎样才能用css实现这个目标?
2回复

响应三角形div

我正在尝试创建一个响应式三角形div ,它将作为标题位于页面顶部。 我能够通过以下代码实现这一目标: div{ width: 0; height: 0; border-style: solid; border-width: 200px 400px 0 0; border-c
2回复

如何创建响应三角形作为右边界?

我正在尝试为一个边框创建一个响应三角形,只有在hover时才可见。 我尝试了下面的代码,但它不起作用,因为它使用静态border-width 。 当我有一个单字符串(单行)链接时,它是完美的,但是当字符串更多(超过一行)时,它就失败了。 这里的例子 代码在这里: SCSS
2回复

用文本创建响应三角形

我需要使用css和html创建一个响应三角形。 三角形将包含文本,随着文本的增加,我希望三角形的大小也增加。 下面是我创建的小提琴。 小提琴 我检查了以下链接,但似乎三角形的形状不同,文字似乎没有换行。 文字开始溢出。 Link1和link2 谢谢,哈迪克
2回复

具有悬停效果的响应三角形

我最近遇到了一篇文章,详细介绍了如何使用纯CSS创建响应三角形 。 我想更进一步,将其纳入当前设计中。 我能够将四个三角形完美地放置在一个正方形div中(创建折纸类型的效果),并且它们反应灵敏。 但是,当我尝试合并悬停效果时,它不会更改三角形的颜色-只会更改其周围的空白区域。
4回复

响应式CSS圈子

目标: 响应式CSS圈子: 以相同的半径缩放。 半径可以按百分比计算。 Radius可以通过媒体查询进行控制。 如果解决方案是javascript ,我仍然需要模拟媒体查询触发器。 我不需要'媒体查询,但我确实希望能够在特定宽度下控制半径百分比: