css metro tile selected style

Я пытаюсь стилизовать плиту в стиле метро после эффекта выбора. Я добавил border-top: 28px solid # 4390df; к div, но я не могу получить выбранный эффект для плитки. Любая помощь будет высоко оценен.css metro tile selected style

Ниже эскиз моей просьбе enter image description here

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

источник

2014-02-18 Kurkula

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

Извините, я обновил вопрос с грубым эскизом. – Kurkula

Я не думаю, что 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>

источник

2014-02-18 23:38:54

Привет Ральф, Спасибо за предложение. Я не могу получить желаемый результат с вашим кодом. Не могли бы вы помочь мне добавить скрипку для кода. Заранее спасибо. – Kurkula

Вот пример того, что я имею в виду: http://codepen.io/pageaffairs/pen/rktxz –

Да. Ответ CodePen по существу такой же, как и выше, с добавлением ссылки живого изображения. –

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

.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

источник

2014-08-26 15:35:59 lexalo

css metro tile selected style

ответ

Смежные вопросы