css metro tile 选定样式答案

【问题标题】：css metro tile selected stylecss metro tile 选定样式
【发布时间】：2014-02-18 23:13:25
【问题描述】：

我正在尝试在选择效果后将 div 设置为 Metro 风格磁贴。我添加了border-top:28px solid #4390df;到 div 但我无法获得瓷砖的选定效果。任何帮助将不胜感激。

下面是我要求的草图

<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;
}

【问题讨论】：

目前还不清楚您的目标是什么。您可以发布所需结果的图片吗？
对不起，我用粗略的草图更新了问题。

标签： html css microsoft-metro tile

【解决方案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>

【讨论】：

嗨拉尔夫，感谢您的建议。我无法使用您的代码获得所需的输出。你能帮我为代码添加小提琴吗？提前致谢。
是的。 CodePen 的答案与上面基本相同，但添加了实时图像链接。

【解决方案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

【讨论】：