Как создать курсив в css? - PullRequest
Новая
       5

Как создать курсив в css?

0 голосов
/ 23 января 2019

Как создать курсив в css, как это

enter image description here

мой код 

.ml{
list-style-type:none;margin:0;padding:0;}
.ml li{display:inline-block;border:solid 1px #000;font-style:italic;padding:5px 10px;}

.ml li.active, .ml li:hover{
background:#000; color:#ffffff}
<ul class="ml">
<li class="active">day</li>
<li>week</li>
<li>month</li>
<li>year</li>
</ul>

Ответы [ 5 ]

0 голосов
/ 23 января 2019

Проблема с некоторыми из ответов, которые я видел до сих пор, состоит в том, что текст становится перекошенным.<li> s уже выделены курсивом, но добавление асимметрии к элементам делает эффект чрезмерно выраженным.

enter image description here

Мы хотим, чтобы коробки были перекошены, нотекст оставлен в покое.

enter image description here

Чтобы сделать это, я добавляю span к каждому li и отсекаю текст в обратном направлении. 

/* Keep things organized and store skew value in CSS variable */
:root {
  --skew-value: -20deg;
}

.ml {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.ml li {
  display: inline-block;
  border: solid 1px #000;
  font-style: italic;
  padding: 5px 10px;
 
  /* Skew the box */
  transform: skew(var(--skew-value));
}

.ml li > span {
  /* Unskew the text */
  transform: skew(calc(var(--skew-value) * -1));
  display: inline-block;
}

.ml li.active,
.ml li:hover {
  background: #000;
  color: #ffffff
}
<ul class="ml">
  <li class="active"><span>day</span></li>
  <li><span>week</span></li>
  <li><span>month</span></li>
  <li><span>year</span></li>
</ul>

http://jsfiddle.net/xftywz1h/

0 голосов
/ 23 января 2019

Вот, что вам нужно, вам может понадобиться еще одна оболочка, чтобы сохранить свойство border

HTML 

<ul class="ml">
<li class="active"><span>day</span></li>
<li><span>week</span></li>
<li><span>month</span></li>
<li><span>year</span></li>
</ul>

CSS 

.ml li:after, .ml li span:after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 31px 5px;
  border-color: transparent transparent #f8f8f8 transparent;
}

.ml li:before, .ml li span:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0px;
  width: 0;
  height: 0;
  border-style: solid;
 border-width: 30px 5px 0 0;
    border-color: #000 transparent transparent transparent;
}

.ml li span:before{
  left: -1px;
  border-color: #F8F8F8 transparent transparent transparent;
}

.ml li span:after{
  right: -0.5px;
  border-color: transparent transparent #000 transparent;
}

jsfiddle см. Рабочую копию здесь

0 голосов
/ 23 января 2019

Просто нужно добавить свойство перекоса к вашему CSS 

.ml{
    list-style-type:none;margin:0;padding:0;}
    .ml li{display:inline-block;border:solid 1px #000;
font-style:italic;padding:5px 10px;transform: skewX(-20deg);}

    .ml li.active, .ml li:hover{
    background:#000; color:#ffffff}
<ul class="ml">
    <li class="active">day</li>
    <li>week</li>
    <li>month</li>
    <li>year</li>
    </ul>
0 голосов
/ 23 января 2019

Вы можете попробовать это:

Вы не можете показать курсивом в стиле шрифта блока его необходимое преобразование и значение skewX, потому что scewX вращает прямоугольник обычно по оси X, а прямоугольник поворачивает этот внутренний элемент или дочерний автоповорот. 

.ml{
list-style-type:none;margin:0;padding:0;}
.ml li {
  display:inline-block;
  border:solid 1px #000;
  font-style:normal;
  padding:5px 10px;
  transform:skewX(-15deg);
  text-transform: uppercase;
  margin-right: 5px;
}

.ml li.active, 
.ml li:hover {
   background:#000; color:#ffffff
}
<ul class="ml">
  <li class="active">day</li>
  <li>week</li>
  <li>month</li>
  <li>year</li>
</ul>
0 голосов
/ 23 января 2019

Попробуйте это 

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  margin:20px;
}

div#myDiv {
  -ms-transform: skewX(-20deg); /* IE 9 */
  -webkit-transform: skewX(-20deg); /* Safari */
  transform: skewX(-20deg); /* Standard syntax */
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...