Question

我试图在选择效果后将div设置为metro样式。我添加了border-top：28px solid＃4390df;到div，但我无法获得瓷砖的选定效果。任何帮助都将受到高度赞赏。

下面是我的请求草图 enter image description here

<div class="tileSelected">
    this is test content
</div>

.tileSelected{
    border-width: 4px;
    border-top:28px solid #4390df;
    border-left:28px solid transparent;
    display:block;
    content:"";
    height:100px;
    width:100px;
    background-color:black;
    color:#fff;
}

Answer 1

我认为border不是这样的。生成的内容对于将该刻度放在右上角是更好的选择。你可以用文字来做，但是一个小的刻度图像会更容易，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.tileSelected {
    height:100px;
    width:100px;
    background:black;
    color:#fff;
    position: relative;
}

.tileSelected::before {
    content: "";
    width: 28px;
    height: 28px;
    top: 0;
    right: 0;
    position: absolute;
    background: url(tick.png);
}

</style>
</head>
<body>

<div class="tileSelected">
    this is test content
</div>

</body>
</html>

Answer 2

您必须在

之前和之后创建所选的：

.tile.selected:before {
position: absolute;
display: block;
content: "\e003";
color: #fff;
right: 0;
font-family: 'metroSysIcons';
font-size: 9pt;
font-weight: normal;
z-index: 102;
top: 0;

}

.tile.selected:after {
position: absolute;
display: block;
border-top: 28px solid #4390df;
border-left: 28px solid transparent;
right: 0;
content: "";
top: 0;
z-index: 101;

}

你可以访问这个小提琴Metro Tile

css地铁砖选择的风格

2 个答案: