Question

好的，在我开始之前，这就是我想用CSS3实现的目标：

这包括一个响应式菱形容器（一个正方形，旋转45度）和四个单独的钻石（最初正方形但显然与父元素一起旋转）。

除了钻石之间的1px间隔物之外，我还设法让形状看起来像我喜欢它们的外观，但我发现很难将中心的字母对齐。从我的JSFIDDLE DEMO中可以看到每颗钻石。

HTML

<div id="cover">
    <div class="cover-logo-wrapper">
        <div id="cover-logo">
            <div id="cover-logo-box-1" class="cover-logo-boxes">
                <span>T</span>
            </div>
            <div id="cover-logo-box-2" class="cover-logo-boxes">
                <span>D</span>
            </div>
            <div id="cover-logo-box-3" class="cover-logo-boxes">
                <span>O</span>
            </div>
            <div id="cover-logo-box-4" class="cover-logo-boxes"></div>
        </div>
    </div>
</div>

CSS

html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

#cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#cover-logo-wrapper {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 10%;
    height: 0;
    padding: 5% 0;
    border: solid 1px rgba(255,255,255,0.2);
}

#cover-logo {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 0;
    padding: 50% 0;
    background: #FFF;
    text-align: center;
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cover-logo-boxes {
    position: absolute;
    width: 50%;
    height: 50%;
}

.cover-logo-boxes span {
    display: block;
    -ms-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    margin: 0 auto;
    text-align: center;
}

#cover-logo-box-1 {
    left: 0;
    top: 0;
    background: red;
}

#cover-logo-box-2 {
    right: 0;
    top: 0;
    background: yellow;
}

#cover-logo-box-3 {
    left: 0;
    bottom: 0;
    background: green;
}

#cover-logo-box-4 {
    right: 0;
    bottom: 0;
    background: blue;
}

请有人指出我出错的地方。我假设使用translateY: -50%本来是赢家，但它不是。

Answer 1

试试这个

.cover-logo-boxes span {
    display: block;
    position: absolute;  //added this
    left: 50%; //added this
    top: 50%; //added this
    -ms-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    margin: 0 auto;
    text-align: center;
}

<强> Demo Here

Answer 2

试试这个

Model.subscribe()

Demo

创建一个响应式菱形，包含4个单独的钻石，中心文字

2 个答案: