Размещение текста в CSS-трапеции
Я унаследовал устаревшее приложение для перезаписи и столкнулся с любопытной проблемой. На странице отображаются табличные данные, где заголовок таблицы находится в пределах трапецеидальной формы, напоминающей вкладку конверта манилы. В нижней части таких таблиц обычно есть строка кнопок, которая имеет ту же форму, что и название таблицы, но повернута 180 °. В настоящее время этот эффект снимается с помощью квадратного изображения с белым треугольником в одной половине на прозрачном фоне в качестве фонового изображения в углу прямоугольного блока для достижения внешнего вида трапеции. Тем не менее, эта техника подвержена мерцанию, когда страница обновляется.
Как упражнение, я попытался проверить, могу ли я заменить его на чистую технику CSS. Я нашел это link для разных форм в CSS и эмулировал трапецию, чтобы выглядеть так, как мне нужно. Я могу правильно разместить текст заголовка таблицы внутри трапеции. Однако, когда мне нужен внешний вид вращающейся трапеции 180 °, я не могу получить текст для размещения внутри формы. Мой код включен ниже, и вот jsFiddle, показывая, что я сделал до сих пор. Я понимаю, что текст показан ниже вращающейся трапеции, потому что высота установлена в 0, и я использую border-top для создания фигуры. Есть ли что-нибудь, что я могу сделать, чтобы это правильно работало?
Пожалуйста, имейте в виду, что это нужно для отображения в IE8 (и, возможно, IE8 в режиме совместимости — IE7). Кроме того, я хотел бы сохранить дополнительные HTML-элементы до минимума, потому что я хочу, чтобы это как можно более семантическое. Я знаю, что могу разместить провал внутри div и полностью позиционировать этот диапазон так, чтобы он отображал текст внутри формы, но когда я это делаю, мне нужно вручную установить ширину на трапеции и когда ширина может варьироваться от строки кнопки до , я бы предпочел не идти по этому пути.
Спасибо.
HTML:
<div>Title Text</div>
<div>Button Row</div>
CSS:
.trap { color: black; font: normal bold 13px Arial; border-bottom: 27px solid #F00; border-right: 27px solid transparent; height: 0px; float: left; line-height: 27px; padding: 0 4px; } .trap180 { clear: both; color: black; font: normal bold 13px Arial; border-top: 27px solid #F00; border-left: 27px solid transparent; height: 0px; float: right; margin: 20px 0 0 0; line-height: 27px; padding: 0px 4px 0; }
stackoverrun.com
Создание различных геометрических фигур при помощи CSS
Одной из интереснейших функций CSS3 является то, что CSS3 позволяет уменьшить использование изображений в веб-дизайне и создавать различные геометричекие фигуры при помощи CSS. Простейшие формы, которые раньше рисовали в Photoshop или Illustrator сейчас можно сделать при помощи CSS3.
Итак, давайте попробуем создать простой набор наиболее распространенных форм, которые можно сделать с помощью CSS3.
Круг
HTML
<div></div>
CSS
CSS очень простой, указываем ширину и высоту, а затем задаем ему border-radius равный половине ширины и высоты.
#circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
Квадрат
HTML
Чтобы создать квадрат в CSS, нам так же, как и для круга, нужен один DIV с идентификатором.
<div> </div>
CSS
CSS в данном случае еще проще, просто указываем равную ширину и высоту.
#square {
width: 120px;
height: 120px;
background: #f447ff;
}
Прямоугольник
HTML
Чтобы создать прямоугольную форму CSS, всё делаем почти также как при создании квадрата. Это самые простые фигуры и ни у кого не должно возникнуть сложностей.
<div> </div>
CSS
В CSS указываем ширину больше высоты.
#rectangle {
width: 220px;
height: 120px;
background: #4da1f7;
}
Овал
HTML
Чтобы создать овал в CSS, создайте DIV с идентификатором, например, oval.
<div> </div>
CSS
Овал создается почти аналогично как и форма круга. Однако, овал имеет продолговатую форму, поэтому необходимо указать ширину больше чем высоту и радиус, равный половине высоты и ширины.
#oval {
width: 200px;
height: 100px;
background: #e9337c;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Треугольник
HTML
Для того чтобы создать треугольник в CSS, опять достаточно одного DIV-а.
CSS
Чтобы создать треугольник будем изменять ширину границы блока. Изменение ширины границы позволит Вам создавать различные углы наклона.
#triangle {
width: 0;
height: 0;
border-bottom: 140px solid #fcf921;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
Треугольник острием вниз
HTML
Чтобы создать форму перевернутого треугольника с помощью CSS, создать опять DIV с идентификатором triangle_down.
<div> </div>
CSS
Чтобы создать перевернутый треугольник, мы должны указать верхнюю, левую и правую границы блока.
#triangle_down {
width: 0;
height: 0;
border-top: 140px solid #20a3bf;
border-left: 70px solid transparent;
}
Треугольник острием лево
HTML
Чтобы создать форму треугольника, которая обращена влево, создадим DIV с идентификатором triangle_left.
<div> </div>
CSS
Для создания треугольника, который «смотрит» влево, определим границы с правой стороны, сверху и снизу.
#triangle_left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}
Треугольник острием вправо
HTML
Код такой же, как и для предыдущих примеров, только со своим идентификатором.
<div> </div>
CSS
Теперь определим границы с левой стороны, сверху и снизу.
#triangle_right {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-left: 140px solid #ff5a00;
border-bottom: 70px solid transparent;
}
Ромб
HTML
Всё тот же простой HTML-код.
<div> </div>
CSS
Создать ромб можно различными способами. Использование свойства transform с определенным значением rotate, позволит отобразить два треугольника рядом друг с другом.
#diamond {
height: 120px;
background: #1eff00;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 310px;
}
Трапеция
HTML
Для того чтобы создать форму трапеции используя CSS, снова создайте DIV с идентификатором.
<div> </div>
Трапеция создается похожим образом, как и треугольних.
#trapezium {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Параллелограмм
HTML
Опять создадим пустой DIV.
<div> </div>
CSS
Чтобы создать форму параллелограмма, нам необходимо настроить значение skew для свойства transform, чтобы повернуть элемент на 30 градусов.
#parallelogram {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
}
Звезда
HTML
Для того чтобы создать форму звезды с помощью CSS понадобится также один DIV.
<div> </div>
CSS
Создание звездочки — это также манипуляция с границами блока и с использованием значения rotate свойства transform. См. код ниже.
#star {
width: 0;
height: 0;
margin: 50px 0;
color: #fc2e5a;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid #fc2e5a;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: »;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star:after {
content: »;
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
Шестиугольная звезда
HTML
Разметка для шестиугольной звезды ничем не отличается от предыдущих примеров, только укажем свой идентификатор.
<div> </div>
CSS
В отличие от обычной звезды с пятью углами, мы создадм два набора форм, а затем объединим их в одну.
#star_six_points {
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #de34f7;
margin: 10px auto;
}
#star_six_points:after {
content: «»;
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #de34f7;
margin: 30px 0 0 -50px;
}
Пятиугольник
HTML
HTML-код всё тот же.
<div> </div>
CSS
Пятиугольник будем состоять у нас из двух элементов. Сначала создадим форму трапеции, а затем добавим форму треугольника на вершину.
#pentagon {
width: 54px;
position: relative;
border-width: 50px 18px 0;
border-style: solid;
border-color: #277bab transparent;
}
#pentagon:before {
content: «»;
height: 0;
width: 0;
position: absolute;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #277bab;
}
Шестиугольник
HTML
Создаем еще один DIV с идентификатором.
<div> </div>
CSS
Существуют различные способы создания шестиугольника. Один из способов практически идентичен созданию пятиугольника. Сначала создайте прямоугольную форму, а затем добавьте два треугольника сверху и снизу.
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 10px auto;
}
#hexagon:before {
content: «»;
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #fc5e5e;
}
#hexagon:after {
content: «»;
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #fc5e5e;
}
Восьмиугольник
HTML
Создание восьмиугольника потребует также одного DIV-а.
<div> </div>
CSS
Восьмиугольник создадим следющим способом. Сначала создадим две одинаковых трапеции, а затем добавим два треугольника с каждой стороны. Хотя есть и некоторые другие способы сделать восьмиугольник — это самый простой способ.
#octagon {
width: 100px;
height: 100px;
background: #ac60ec;
position: relative;
}
#octagon:before {
content: «»;
width: 42px;
height: 0;
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid #ac60ec;
border-left: 29px solid #f4f4f4;
border-right: 29px solid #f4f4f4;
}
#octagon:after {
content: «»;
width: 42px;
height: 0;
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #ac60ec;
border-left: 29px solid #f4f4f4;
border-right: 29px solid #f4f4f4;
}
Сердце
HTML
Для создания формы в виде сердца создадим DIV.
<div> </div>
CSS
Форму сердца сделать не легко, но это может быть реализовано путем вращения элементов под разными углами и изменения свойства transform-origin для того, чтобы изменить расположение трансформированных элементов.
#heart {
position: relative;
}
#heart:before,#heart:after {
content: «»;
width: 70px;
height: 115px;
position: absolute;
background: red;
left: 70px;
top: 0;
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Яйцо
HTML
Для того, чтобы создать фигуру в виде яйца нам также понадобиться один DIV.
<div> </div>
CSS
Яйцевидная форма практически совпадает с овальной формой, за исключением того, что высота немного выше, чем ширина и радиус необходимо тщательно подобрать, чтобы получить хороший результат.
#egg {
width: 136px;
height: 190px;
background: #ffc000;
display: block;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Символ бесконечности
HTML
Создаем снова пустой DIV.
<div> </div>
CSS
Форма бесконечности может быть создана путем тщательного манипулирования размерами границы и установки углов круга.
#infinity {
width: 220px;
height: 100px;
position: relative;
}
#infinity:before,#infinity:after {
content: «»;
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
border: 20px solid #06c999;
-moz-border-radius: 50px 50px 0;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Облачко с комментарием
HTML
Создаем DIV с ID comment_bubble.
<div> </div>
CSS
Облако с комментарием может быть создано путем создания прямоугольника с закругленными углами, и затем добавления треугольной формы с левой стороны.
#comment_bubble {
width: 140px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#comment_bubble:before {
content: «»;
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
Pacman
HTML
Чтобы создать форму в виде Пакмана из известной игры, создадим также один DIV.
<div> </div>
CSS
Для создания Pacman-а будем манипулировать границей и радиусом, чтобы создать пустое пространство на левой стороне окружности.
#pacman {
width: 0;
height: 0;
border-right: 70px solid transparent;
border-top: 70px solid #ffde00;
border-left: 70px solid #ffde00;
border-bottom: 70px solid #ffde00;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
}
Демонстрация примеров
Также для создания форм вы можете использовать следующие онлайн-генераторы:
Надеюсь, вам понравился этот урок и он будет вам полезен.
Перевод с http://www.1stwebdesigner.com/
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
www.webmasters.by
Блоки из фигур на CSS
.block-figure-3 * {
box-sizing: border-box;
}
.block-figure-3 {
margin: 20px auto;
padding: 0;
position: relative;
max-width: 600px;
width: 100%;
overflow: hidden;
}
.block-figure-3 .figure-txt {
border: 6px solid #BFE2FF;
}
.block-figure-3 .image-wrap {
border: 6px solid #BFE2FF;
border-radius: 100%;
width: 200px;
height: 200px;
position: absolute;
top: 30px;
background: #FFF;
z-index: 1;
right: 0;
}
.block-figure-3 .image-lay {
width: 100px;
height: 200px;
position: absolute;
top: -6px;
background: #FFF;
z-index: 2;
right: -6px;
}
.block-figure-3 .image {
transform-style: preserve-3d;
perspective: 1000px;
border-radius: 50%;
position: absolute;
z-index: 3;
height: 176px;
width: 176px;
top: 6px;
right: 6px;
}
.block-figure-3 .front,
.block-figure-3 .back {
background-size: cover;
background-position: center;
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
backface-visibility: hidden;
text-align: center;
border-radius: 50%;
color: #fff;
height: 176px;
width: 176px;
border: 6px solid #BFE2FF;
position: absolute;
}
.block-figure-3 .inner {
transform: translateY(-50%) translateZ(60px);
top: 50%;
position: absolute;
margin: auto;
z-index: 4;
width: 100%;
}
.block-figure-3 .image .back{
transform: rotateY(180deg);
transform-style: preserve-3d;
}
.block-figure-3:hover .back{
transform: rotateY(0deg);
transform-style: preserve-3d;
}
.block-figure-3:hover .front{
transform: rotateY(-180deg);
transform-style: preserve-3d;
}
.block-figure-3 .inner a {
font-weight: bold;
font-family: Verdana, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #337AB7;
text-align: center;
margin: auto;
display:block;
font-size: 14px;
line-height: 130px;
height: 142px;
width: 142px;
border:6px solid #BFE2FF;
border-radius: 50%;
transition:all .6s ease-in-out;
overflow:hidden;
}
.block-figure-3 .inner a::before{
content:»;
position:absolute;
top:-12px;
margin:auto;
display:block;
border-radius:50%;
width:166px;
height:166px;
left:-1px;
transition:box-shadow .6s ease-in-out;
z-index:-1;
}
.block-figure-3 .inner a:hover{
color:#fff;
}
.block-figure-3 .inner a:hover::before{
box-shadow: inset 0 0 0 166px #337AB7;
}
.block-figure-3 .figure-txt {
position: relative;
z-index: 1;
padding: 10px 20px;
margin-right: 100px;
min-height: 260px;
}
.block-figure-3 .figure-txt h4 {
text-transform: uppercase;
color: #337AB7;
font-weight: bold;
font-family: Verdana, sans-serif;
font-size: 20px;
margin: 6px 100px 12px 0;
}
.block-figure-3 .figure-txt p {
font-family: Verdana, sans-serif;
font-size: 16px;
margin: 10px 100px 10px 0;
}
@media (max-width: 560px) {
.block-figure-3 .figure-txt,
.block-figure-3 .figure-txt h4,
.block-figure-3 .figure-txt p {
margin-right: 0;
}
.block-figure-3 .figure-txt {
min-height: auto;
border-bottom: none;
}
.block-figure-3 .image-lay {
display: none;
}
.block-figure-3 .image-wrap {
border: 6px solid #BFE2FF;
border-top: none;
border-radius: 0;
width: 100%;
height: 160px;
position: static;
}
.block-figure-3 .image {
border-radius: 0;
position: static;
height: 160px;
width: 100%;
}
.block-figure-3 .front,
.block-figure-3 .back {
height: 154px;
width: 100%;
position: static;
border-radius: 0;
border: none;
}
.block-figure-3 .inner {
transform: translateY(-100%) translateZ(60px);
top: -6px;
}
.block-figure-3 .inner a::before{
display: none;
}
.block-figure-3 .inner a:hover{
color:#000;
}
}
atuin.ru
Скошенные вкладки с использованием трансформаций CSS3
Нам было интересно, есть ли простой способ создать трапецию с помощью CSS, например с помощью свойств границы и других подобных свойств. Мы поискали и не встретили готового решения. Так что мы решили попробовать использовать псевдоэлемент для фона и повернуть его в пространстве, чтобы он выглядел, как трапеция. После этого нам посоветовали добавить радиус границы, чтобы трапеция стала похожа на вкладку, и вот что получилось в результате:
Демонстрация работы
Код HTML
<p>Trapezoid</p> <p>Trapezoid tab</p>
Код CSS
/** * Простой способ создания трапеций с помощью трехмерных трансформаций */
p {
position: relative;
display: inline-block;
padding: 1em;
margin: 2em;
}
p::before {
content: ''; /* Для создания формы */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: skyblue;
transform: perspective(4px) rotateX(1deg);
}
p.tab::before {
/* Совет о скруглении углов */
border-radius: 10px 10px 0 0;
}После этого мы подумали, почему бы не сделать из этой идеи пример создания вкладок? Мы создали демонстрацию работы, и заметили, что если изменить значение свойства начала трансформации, получатся другие интересные формы вкладок:
Демонстрация работы
Код HTML
<!-- Этот код HTML только для демонстрации работы. Не используйте несколько главных элементов --> <nav> <a href="#">Home</a> <a href="#">Projects</a> <a href="#">About</a> </nav> <main> Content area </main> <nav> <a href="#">Home</a> <a href="#">Projects</a> <a href="#">About</a> </nav> <main> Content area </main> <nav> <a href="#">Home</a> <a href="#">Projects</a> <a href="#">About</a> </nav> <main> Content area </main>
Код CSS
/** * Скошенные вкладки с помощью трехмерных трансформаций */
body { padding: 50px; }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1.5em 1.5em 1em;
color: inherit;
text-decoration: none;
margin: 0 -7px;
}
nav a::before,
main {
border: .1em solid #aaa;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: .5em; left: 0;
z-index: -1;
border-bottom: none;
border-radius: 10px 10px 0 0;
background: #ddd;
box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
nav.left a {
padding: 1.5em 2em 1em 1em;
}
nav.left a::before {
transform-origin: bottom left;
}
nav.right a {
padding: 1.5em 1em 1em 2em;
}
nav.right a::before {
transform-origin: bottom right;
}
nav a.selected {
z-index: 2;
}
nav a.selected::before {
margin-bottom: -1px;
border-top-width: 1px;
}
nav a.selected::before,
main {
background: #eee;
}
main {
display: block;
margin: -8px 0 30px -15px;
padding: 1em;
border-radius: 3px;
}Отлично, что этот способ не теряет функциональности в браузерах, не поддерживающих трансформации. Получаются милые вкладки с закругленными углами, только не скошенные, хотя для восстановления полной функциональности в старых версиях браузеров можно использовать библиотеку JavaScript Modernizr. Чтобы увидеть, как вкладки будут выглядеть в старых версиях браузеров, просто закомментируйте свойства трансформации в демонстрации работы.
Надеемся, Вам понравилась эта идея, и она пригодится Вам в работе. Проверено в браузерах Chrome, Firefox, Safari, но для корректного отображения может понадобиться добавить свойства с приставками производителей, Internet Explorer версии 9, с помощью обходного пути с использованием Modernizr, и Internet Explorer версий 10 и 11.
Автор урока Lea Verou
Перевод — Дежурка
Смотрите также:
www.dejurka.ru