плитка метро css выбранный стиль

Question

плитка метро css выбранный стиль

0

Я пытаюсь стилизовать плиту в стиле метро после эффекта выбора. Я добавил 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;
}

Kurkula 19 фев. 2014, в 00:47

Источник

2

Не совсем понятно, к чему вы стремитесь. Можете ли вы опубликовать изображение желаемого результата?
ralph.m 18 фев. 2014, в 23:20
0

извините я обновил вопрос с черновым наброском.
Kurkula 18 фев. 2014, в 23:23

Теги:

html

css

tile

microsoft-metro

2 ответа

1

вы должны создать выбранный: до и после

.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

lexalo 26 авг. 2014, в 13:06

Ещё вопросы

Не совсем понятно, к чему вы стремитесь. Можете ли вы опубликовать изображение желаемого результата?
извините я обновил вопрос с черновым наброском.

ralph.m · Accepted Answer · 2014-02-18T21-04-00.000Z

Я не думаю, что 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.io/pageaffairs/pen/rktxz
Да. Ответ CodePen по сути тот же, что и выше, с добавленной ссылкой на живое изображение.