web-dev-qa-db-fra.com

Slanted Corner sur CSS box

Je joue avec CSS depuis peu de temps et j'essaie d'avoir une boîte normale mais avec le coin supérieur gauche coupé à un angle de 45 degrés. Pas une petite quantité non plus; Je regarde un coin assez large coupé à cet angle. Cet effet:

http://tadesign.net/corner.jpg

Comment dois-je m'y prendre?

csscss3css-shapes
20
Mach

Descriptions

Slantastic ( http://meyerweb.com/eric/css/Edge/slantastic/demo.html ) prend en charge les anciens navigateurs. Pour CSS3, essayez les polygones CSS: http://alastairc.ac/2007/02/dissecting-css-polygons/ .

Code

Le HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

Le CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

Le résultat: http://jsfiddle.net/mdQzH/

Code alternatif

Pour utiliser des bordures transparentes et du texte dans la section des bordures ... Le HTML:

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>

Le CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

Le résultat: http://jsfiddle.net/76EUw/2

20
Ray Toal

Cela peut être fait en utilisant svg clip-path.

Avantages:

  1. Travailler avec une div régulière
  2. Pas de hacky frontières pour créer des formes
  3. N'appliquez aucune rotation afin de pouvoir le faire facilement sur un fond non uniforme
  4. N'ajoute aucun élément div via CSS pour que vous puissiez toujours utiliser le fond de div habituel (au cas où vous auriez du code le modifiant par exemple!)

Le CSS suivant façonnera la div avec le coin en bas à droite coupé afin que vous puissiez mettre n'importe quel fond:

-webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);

Il y a plusieurs générateurs SVG en ligne:

9
JBE

Dans un proche avenir, vous pourrez y parvenir avec le module CSS Shapes . 

Avec la propriété shape-inside - nous pouvons faire en sorte que le texte s'écoule en fonction de la forme.

La forme fournie peut être l'une des formes suivantes: inset (), circle (), ellipse () ou polygone ().

Cela peut actuellement être fait dans les navigateurs Webkit, mais vous devez d’abord effectuer les opérations suivantes: (instructions de Web Platform )

Pour activer les modes Formes, Régions et Fusion:

1) Copier et coller opera: // flags/# enable-experimental-web-platform-features dans le fichier barre d'adresse, puis appuyez sur Entrée.

2) Cliquez sur le lien "Activer" dans cette section.

3) Cliquez sur le bouton "Relancer maintenant" en bas du navigateur la fenêtre.

Si vous avez fait cela - alors vérifiez ceci FIDDLE

qui ressemble à ceci:

enter image description here

<div class="shape">
     Text here
</div>

CSS

.shape{
  -webkit-shape-inside: polygon(65px 200px,65px 800px,350px 800px,350px 80px,160px 80px);
  shape-inside: polygon(65px 200px,65px 450px,350px 450px,350px 80px,160px 80px);
  text-align: justify;
}

Pour construire la forme du polygone - j'ai utilisé ce site

Vous trouverez plus d’informations sur les différentes propriétés prises en charge ici

3
Danield

CSS3 linear-gradient() peut dessiner ce fond.

background: linear-gradient(to bottom right, transparent 50px, blue 50px);


body {
  background: linear-gradient(red, orange) no-repeat;
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(to bottom right, transparent 50px, blue 50px);
  margin: 25px auto;
  padding: 50px;
  height: 200px;
  width: 200px;
  color: white;
}
<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

3
Mohammad Usman

J'ai réussi à faire quelque chose de très similaire en n'utilisant que des étendues supplémentaires et l'effet est réalisé via CSS.

jsFiddle pour illustrer.

HTML
<div class="more-videos"> <a href=""><span class="text">More videos</span><span class="corner"></span></a> </div>

CSS

`.more-videos {
     padding: 20px;
 }

    .more-videos a {
        text-decoration: none;
        background-color: #7f7f7f;
        position: relative;
        padding: 10px 10px 5px 15px;
    }

        .more-videos a span {
            font-size: 20px;
            color: #ffffff;
        }

            .more-videos a span.text {
                padding-right: 10px;
            }

            .more-videos a span.corner {
                border-top: 15px solid #7f7f7f;
                border-right: 15px solid #4d4c51;
                border-bottom: none;
                border-left: none;
                bottom: 0px;
                right: 0px;
                position: absolute;
            }

        .more-videos a:hover span.corner {
            border-right: 15px solid #999999;
        }

J'ai inclus un style de survol déclenché par le parent. Le 'border-right: 15px solid # 4d4c51;' la couleur est celle qui doit être différente de la couleur de fond de l'ancre parent afin de créer le contraste diagonal/angulaire.

1
David Barnett

J'ai proposé une solution conviviale de Ray Toal fiddle: http://jsfiddle.net/duk3/hCaXv/

Le html: 

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello llo hello llo hello hello hello llo hello hello hello hello hello hello hello hello</div>
</div>

Le css: 

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 100%;
    box-sizing:border-box;
    height: 0px;
    border-bottom: 2em solid red;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
}
.main {
    background-color: red;
    padding: 0 2em;
}

J'espère que ça aide !

1
Romainpetit