Biaisée des Frontières sur une Div

Je suis en train de pencher une div, similaire à ceci:
Oblique en haut d'une div à l'aide de css sans inclinaison du texte
ou ceci: http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/

Voici une image de ce que je suis en train de faire:

Biaisée des Frontières sur une Div

En gros, j'ai besoin d'incliner les frontières étranges façons sur tous les 4 côtés. Je peux le faire avec des images de fond, mais je préfère une certaine façon de faire cela en CSS donc les divs peut être sensible en largeur et en hauteur. J'aimerais trouver une solution qui fonctionne sur les navigateurs plus anciens, mais je comprends que je ne peut pas tout avoir!!

Quel serait le meilleur moyen d'avoir des obliques frontières sur les 4 côtés? (Note: la frontière sur le fond de la boîte verte est incliné vers le haut au milieu, et en bas à l'extérieur, et je n'ai PAS besoin de frontières pour ce faire. juste une barre oblique dans une direction est bonne.)

  • Question intéressante.. je ne sais pas si je dois utiliser la rotate ou skew
  • Je suis très intéressé par celui-ci-une bonne question
  • Vous pourrait fausser la div dans un sens et déformer le texte en arrière le même montant..
  • Qui ne fonctionne que si ils n'ont pas été irrégulière. Je ne veux pas d'un parallélogramme, mais un trapèze irrégulier.
InformationsquelleAutor Michelle | 2013-10-02
  1. 29

    J'ai été en mesure de faire quelque chose de très similaire.. il fonctionne dans tous les navigateurs modernes.

    Biaisée des Frontières sur une Div

    HTML - Assez simple

    CSS:

    div:nth-child(1) {
background: rgb(122, 206, 122);
height: 140px;
transform: skew(-10deg) rotate(2deg);
-webkit-transform: skew(-10deg) rotate(2deg);
-moz-transform: skew(-10deg) rotate(2deg);
}
div:nth-child(1) p {
transform: skew(10deg) rotate(-2deg);
-webkit-transform: skew(10deg) rotate(-2deg);
-moz-transform: skew(10deg) rotate(-2deg);
padding: 3% 2%;
}
div:nth-child(2) {
border-bottom: 180px solid rgb(233, 233, 65);
border-left: 8px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 60px;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
div:nth-child(2) p {
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
padding: 3.5% 3%;
}
div:nth-child(3) {
border-top: 140px solid rgb(253, 74, 74);
border-left: 23px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 20px;
transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
div:nth-child(3) p {
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
position: absolute;
top: -140px;
padding: 3% 3%;
}
div:nth-child(3):before {
content: '';
width: 124%;
height: 80px;
background: white;
position: absolute;
left: -20%;
bottom: 120px;
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}

    HTML:

    <div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>
<div>
<p>text..</p>
</div>

    Plein Écran Démo ---- jsFiddle démo

    • Cela fonctionne très bien. La boîte verte, fonctionne très bien, mais le jaune et le rouge, les deux ont beaucoup de mal à de petites tailles. Comme ceci: s16.postimg.org/42gvtkggl/Capture.png
    • Mise à jour de ma réponse..
    InformationsquelleAutor Josh Crozier
  2. 1

    Vous pouvez aussi utiliser "clip-path" et de définir n'importe quel forme dont vous avez besoin.
    P. S. JS n'est pour transformer toutes les 2 secondes.

    JS:

    var wrapper = document.querySelector(".wrapper");
var textBlock = document.querySelector(".text-block");
function gRI(max) { //getRandomInt
return Math.floor(Math.random() * Math.floor(max));
}
setInterval(function(){
//new color
let newColor = "rgb(" + gRI(255) + "," + gRI(255) + "," + gRI(255) +")";
wrapper.style["background-color"] = newColor;
//new shape
let newShape = 
"polygon(" +
gRI(40) + "px " + gRI(40) + "px, " + //top left
gRI(40) + "px " + "calc(100% - " + gRI(40) + "px), " +  //top right
"calc(100% - " + gRI(40) + "px) " + "calc(100% - " + gRI(40) + "px), " +
"calc(100% - " + gRI(40) + "px) " + gRI(40) + "px " +
")";
textBlock.innerHTML = "clip-path: " + newShape +
" <br><br> background-color: " + newColor;
wrapper.style["clip-path"] = newShape;
}, 2000)

    CSS:

    .wrapper{
box-sizing: border-box;
width: 90%;
min-width: 200px;
margin: 25px auto;
padding: 50px;
background-color: lightgray;
transition: 0.5s;
clip-path: polygon( 25px 25px, 25px calc(100% - 25px), calc(100% - 25px) calc(100% - 25px), calc(100% - 25px) 25px );
}
.text-block{
width: 100%;
}

    HTML:

    <div class="wrapper">
<div class="text-block">Changes every 2 seconds...</div>
</div>

    InformationsquelleAutor Daniel Priest