Разное

Блок с углом на css, флажок

Блок с текстом и углом на css.

1

Какой-то текст с очень важной информацией

Какой-то текст с очень важной информацией

2
3

Какой-то текст с очень важной информацией

Какой-то текст с очень важной информацией

4
5

Какой-то текст с очень важной информацией

Какой-то текст с очень важной информацией

6

Верстка

<div class="foundation foundationGr col41 colLeft">
<span>1</span>
<div class="foundation_center">
<p>
Какой-то текст с очень важной информацией
</p>
</div>
</div>
<div class="clear"></div>
<div class="foundation foundationOr col41 col41_first colRight">
<div class="foundation_center">
<p>
Какой-то текст с очень важной информацией
</p>
</div>
<span>2</span>
</div>
<div class="clear"></div>
<div class="foundation foundationGr col41 colLeft">
<span>3</span>
<div class="foundation_center">
<p>
Какой-то текст с очень важной информацией
</p>
</div>
</div>
<div class="clear"></div>
<div class="foundation foundationOr col41 colRight">
<div class="foundation_center">
<p>
Какой-то текст с очень важной информацией
</p>
</div>
<span>4</span>
</div>
<div class="clear"></div>
<div class="foundation foundationGr col41 colLeft">
<span>5</span>
<div class="foundation_center">
<p>
Какой-то текст с очень важной информацией
</p>
</div>
</div>
<div class="clear"></div>
<div class="foundation foundationOr col41 colRight">
<div class="foundation_center">
<p>
Какой-то текст с очень важной информацией
</p>
</div>
<span>6</span>
</div>
<div class="clear"></div>
<div class="clear_last"></div>

Стили css:

.col41 {width: 41%; float: left; box-sizing: border-box; margin-bottom: 20px;}
.col41_first {margin-top: 60px;}
.col41.colRight {float: right}
.foundation {height: 100px; position: relative}
.foundation span {position: absolute; color: #fff; font-size: 30px; font-weight: bold;top: 50%;
margin-top: -17px;}
.foundationGr {background: #76952d; padding: 10px 0px 10px 40px;}
.foundationGr span {left: 12px;}
.foundationGr:after {content: ''; display: block; position: absolute; border-top: 50px solid transparent;
border-left: 80px solid #76952d; top: 0;
border-bottom: 50px solid transparent; right: -80px;}
.foundationOr {background: #777; padding: 10px 40px 10px 0px;}
.foundationOr span {right: 12px;}
.foundationOr:before {content: ''; display: block; position: absolute; border-top: 50px solid transparent;
border-right: 80px solid #777; top: 0;
border-bottom: 50px solid transparent; left: -80px;}
.foundation_center {background: #fff; width: 100%; height: 80px; position: relative; box-sizing: border-box;
display: table;}
.foundation_center p { display: table-cell;
vertical-align: middle;}
.foundationGr .foundation_center {padding: 0 0 0 10px;}
.foundationGr .foundation_center:after {content: ''; position: absolute; border-top: 40px solid transparent;
border-left: 60px solid #fff; top: 0;
border-bottom: 40px solid transparent; right: -60px; z-index: 1}
.foundationOr .foundation_center:before {content: ''; position: absolute; border-top: 40px solid transparent;
border-right: 60px solid #fff; top: 0;
border-bottom: 40px solid transparent; left: -60px;}
.clear_last {clear: both;}
@media (max-width: 600px) {
.col41 {width: calc(100% - 80px); float: none; }
.col41_first {margin-top: 0px;}
.clear {clear: both}
}


сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей