web-dev-qa-db-fra.com

Comment créer une forme de triangle dans l'angle supérieur droit d'un autre div pour regarder divisé par une bordure

Je veux créer une forme comme sur cette photo:

shape

J'ai créé une forme de triangle comme sur cette photo et défini les marges pour qu'elles soient en haut à droite, mais je ne sais pas comment les faire apparaître divisées à partir du div gauche comme indiqué sur l'image.

Dois-je "couper" le div gauche pour conserver sa bordure grise et avoir l'air séparé du triangle vert?

Y a-t-il une idée de comment faire cela?

MODIFIER:

  1. J'utilise une barre de navigation fixe sur la page, donc quand je défile si div est position: absolu, la barre de navigation va derrière div.
  2. l'espace entre le triangle vert et le reste de div doit être transparent, car j'utilise l'image comme arrière-plan de page
htmlcsscss3css-shapes
34
Ian J

Je suggère, compte tenu du balisage suivant:

#box {
    width: 10em;
    height: 6em;
    border: 4px solid #ccc;
    background-color: #fff;
    position: relative;
}

#box::before,
#box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

#box::before {
    border-width: 1.5em;
    border-right-color: #ccc;
    border-top-color: #ccc;
}

#box::after {
    border-radius: 0.4em;
    border-width: 1.35em;
    border-right-color: #0c0;
    border-top-color: #0c0;
}
<div id="box"></div>
49
David Thomas

Placez deux div absolument positionnés dans un div contenant avec position relative. Faites ensuite les triangles avec le triangle extérieur légèrement plus grand que le triangle intérieur. Positionnez ensuite ces éléments dans le coin supérieur droit du conteneur.

[~ # ~] html [~ # ~] 

<div class="container">
    <div class="inner-triangle"></div>
    <div class="outer-triangle"></div>
</div>

[~ # ~] css [~ # ~] 

.container{
    border: 2px solid gray;
    position: relative;
    height: 100px;
}

.inner-triangle{
    border-left: 20px solid transparent;
    border-right: 20px solid green;
    border-bottom: 20px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    right: 0px;
    z-index: 2;
}

.outer-triangle{
    border-left: 22px solid transparent;
    border-right: 22px solid gray;
    border-bottom: 22px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    right: 0px;
    z-index: 1;
}

JS Fiddle: http://jsfiddle.net/u8euZ/1

4
Kevin Bowersox

Vous pouvez utiliser un pseudo-élément de rotation conjointement avec un overflow:hidden sur le parent.

De là, vous pouvez positionner le pseudo en haut à droite en utilisant position:absolute et vous devriez être prêt à partir!

div {
  height: 250px;
  width: 300px;
  background: lightgray;
  border-radius: 10px;
  border: 5px solid dimgray;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
}
div:before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  height: 100px;
  width: 100px;
  background: green;
  border: 5px solid dimgray;
  transform: rotate(45deg);
}

/***********FOR DEMO ONLY*******************/


html, body {
    margin:0;
    padding:0;height:100%;
    vertical-align:top;overflow:hidden;
    background: rgb(79, 79, 79);
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}
<div></div>
2
jbutler483