Question

我一直在网上搜索已经有一段时间了，无法找到任何解决方案，所以我在这里问。

在下面的图像中显示我的问题。

http://www.digitusweb.nl/nieuw/wp-content/themes/waarbeek/images/what%20the%20code.jpg

我怎样才能制作这款菱形div。我在220px X 220px的div上尝试了transform: rotate(-45deg);，并且让该div的内容为transform: rotate(45deg);

另一个问题..我怎样才能让小边框箭头转换成更大的蓝色矩形菱形div？

Answer 1

转换CSS属性是CSS3规范的一部分，在某些浏览器中仍然不受支持。您将需要一个更加跨平台的CSS类来覆盖以下浏览器特定属性（直接来自css3please.com）

.box_rotate {
  -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(45deg);  /* IE 9 */
       -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
          transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

Answer 2

好吧我选择了rotate样式，但我必须制作内容absolute以启用它自己的转换样式。

.di {
    width: 100px;
    height: 100px;
    border: 2px solid lightBlue;
    float: left;
    margin-right: 50px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    position: relative;
}

.di:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    right: 2px;
    bottom: 2px;
    border-right: 30px solid rgba(0, 0, 0, 0.2);
    border-top: 30px solid transparent;
    border-bottom: 0 solid transparent;
}

div.di span {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 100px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

这是JSFIDDLE。

Phew认为第二个是一个很好的挑战，

查看小提琴以查看css，这是我使用的jQuery，

$('.bigDi').on('click', function() {
    $('.bigDi, .content').toggleClass('active');               
});

第二个问题JSFIDDLE

制作一个带有箭头的钻石div，可以展开

2 个答案: