Plat à angle aigu ou biseauté coins

Est-il possible de créer une forte plat coin avec le CSS et le HTML?

Quelque chose comme ceci:

  ____
 /    \
 |    |
 \____/
InformationsquelleAutor wolfdawn | 2012-06-04
  1. 21

    Coup d'oeil ici. Vous y trouverez tout ce que vous devez:

    http://css-tricks.com/examples/ShapesOfCSS/

    Modifier
    Dans le cas où le lien est perdu:

    CSS

    #octagon { 
  width: 100px; 
  height: 100px; 
  background: red;  
  position: relative; 
} 

#octagon:before { 
  content: ""; 
  position: absolute;  
  top: 0; left: 0; 
  border-bottom: 29px solid red; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; height: 0; 
} 

#octagon:after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-top: 29px solid red; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; 
  height: 0; 
}
    • Oui, vous avez raison, je l'ai changé
    • Mais vous n'obtenez pas la accepté de répondre maintenant. De la honte. Le vôtre, c'est mieux.
    • Pas un problème. Lorsque la réponse à faire fonctionne le mieux pour lui, alors c'est ok. À la fin, c'est aider les gens et pas de savoir qui obtient reconnus.
    • Ouais, mais c'est aussi pour aider les personnes qui effectuent une recherche sur ce site dans le futur. S'ils voient les autres réponses acceptées, ils peuvent penser que c'est la meilleure, avec les 4 extra divs. Oh bien.
    • J'espère que vous n'êtes pas fou que j'ai "volé" votre réponse, ce n'était pas mon intention. J'ai pris votre idée et c'était juste curieux si je peux le faire comme je l'entends
    • soins à dire pourquoi c'est mieux? Je ne dis pas que vous avez tort, je suis juste en espérant apprendre quelque chose. Jusqu'ici je ne vois que la solution fonctionne, mais seulement pour les divs qui fixe la taille de 100x100, alors que le mien fonctionne pour toutes les largeurs et hauteurs. Et bien sûr, j'ai pu réduire le nombre de supplémentaires divs à l'aide du contenu et de la pseudo-sélecteurs, mais puis-je perdre IE7 soutien et ci-dessous
    • Non, je n'ai aucune raison d'être folle. Différentes façons de se rendre à l'objectif. Quelle est la meilleure façon de le demander à personne est sa décision. Comme je l'ai dit, peut objectif est de ne pas avoir "accepté" réponse. Je suis ici pour vous aider en montrant une certaine manière, je choisirais.
    • C'est mieux qu'elle ne tient pas utiliser supplémentaire de balisage. Le balisage est pour le contenu, CSS est pour quoi il ressemble. Et vous avez raison au sujet de la taille fixe, mais si vous allez à l'utilisation de Javascript, de toute façon, vous pouvez modifier la taille ainsi que.
    • href="http://jsfiddle.net/XSs9L/1/" >Voici un jsFiddle qui ne repose pas sur étant de taille 100x100, et sans Javascript. Il ne fonctionne pas sous IE7 mais...
    • très belle solution, merci pour le partage

    InformationsquelleAutor Sven Bieder
  2. 10

    Voici ma solution, à l'aide de la CSS formes de Chris Coyier.

    http://jsfiddle.net/dDejan/XSs9L/

    4 divs sont insérés via JavaScript (bien, jQuery, en fait) pour chacun de vos conteneurs que vous souhaitez en forme de cette façon. Ces divs sont en position absolue dans les coins de ses parents, et ils sont de style en conséquence, comme décrit dans le lien posté par Sven Bieder

    • Il peut être fait avec un seul élément supplémentaire
    • Bon à savoir @VladimirStarkov, merci pour ce commentaire pénétrant 🙂
    InformationsquelleAutor Dejan
  3. 3

    Vous pouvez composer ce à l'aide de positionnement absolu :before et :after éléments à l'aide de la CSS triangles technique.

    <div class="box"></div>

    css:

    .box {
   background-color:#2020ff;
   height:50px;
   width:50px;
   position:relative   
}

.box:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 10px solid #ffffff;
    border-bottom: 10px solid transparent;
    border-right:10px solid #ffffff;  
    position:absolute;
    top:-9px;
    right:0px;

}
    • Cela sonne comme un bon début, de partager un exemple de code?
    • Cela semble bon, mais pourriez-vous expliquer le code? Je ne comprends pas tout, comment ça marche?
    • C'est un vieux truc de faire un triangle de la pièce de coin d'une frontière. Dans ce cas, c'est un triangle blanc qui recouvre une partie de la boîte bleue. Vous pouvez modifier les paramètres :après pour voir comment il fonctionne. Utilisez-en un autre avec :avant de couvrir le coin supérieur gauche. Voici comment cela fonctionne: stackoverflow.com/questions/7073484/...
    InformationsquelleAutor Diodeus - James MacFarlane
  4. 1

    CSS:

    box {
  background-color: transparent;
  position: fixed;
  width: 300px;
  height: 300px;
}
svg {
  width: 300px;
  height: 300px;
}
polygon {
  visibility: visible;
  background: black;
  stroke: white;
}

    HTML:

    <box>
  <svg>
    <polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" />
  </svg>
</box>

    InformationsquelleAutor Cvijetin Maletić
  5. -1

    CSS:

    .rotate {
    margin: 100px;
    background-color: olivedrab;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
}

    HTML:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="rotate"></div>
</body>

</html>

    InformationsquelleAutor Rohit Panchal