3
votes

Comment créer une boîte italique en CSS?

Comment créer une boîte en italique en CSS comme ceci

mon code est

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

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

css

0 commentaires

5 Réponses :

1
votes

Essayez ceci

<!DOCTYPE html>
<html>
<head>

</head>
<body>

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

</body>
</html>

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 */
}

0 commentaires

5
votes

Il suffit d'ajouter la propriété skew à votre css

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

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

0 commentaires

1
votes

Vous pouvez essayer ceci:

vous ne pouvez pas afficher la boîte en italique de style police, sa transformation nécessaire et sa valeur skewX, car scewX fait pivoter la boîte normalement sur l'axe X et une boîte fait pivoter cet élément interne ou les enfants pivotent automatiquement.

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

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

0 commentaires

1
votes

Voici ce dont vous avez besoin, Vous devrez peut-être utiliser un autre wrapper pour conserver la propriété border

html

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

CSS

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

0 commentaires

4
votes

Le problème avec certaines des réponses que j'ai vues jusqu'à présent est que le texte devient trop biaisé. Les

sont déjà en italique, mais l'ajout de biais aux éléments rend l'effet sur-prononcé.

Nous voulons que les cases soient biaisées, mais le texte laissé seul.

Pour ce faire, j'ajoute un span à chaque li et détachez le texte dans le sens inverse.

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

/* 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
}

http://jsfiddle.net/xftywz1h/

0 commentaires