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

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

下面是我要求的草图

My fiddled code is 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;
}

【问题讨论】:

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

标签: 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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-01
    • 2011-03-16
    • 2014-08-09
    • 2010-12-31
    相关资源
    最近更新 更多