3
votes

Comment trianguler la bordure supérieure et inférieure?

Comme vous pouvez le voir sur l'image ci-dessous, j'essaie de déformer ou de trianguler mon div de bas en haut, mais je ne sais pas comment faire. J'ai juste essayé quelques fois de le faire, mais je n'ai pas pu obtenir le résultat. Alors, comment puis-je le faire en utilisant après, avant psuedo? Ce n'est pas grave avec psuedo, mais je me demande comment faire?

Voici mon code:

<div class="block"></div>

body{
background:lightblue;;
}
.block{
    background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
    border: 1px solid #fff;
    width: 300px;
    height: 150px;
    margin: 30px;
}

css linear-gradients css-shapes

6 commentaires

comme ça stackoverflow.com/a/54550358/8620333 ? ou vous avez également besoin de rayon?

non j'essaye de le faire comme ci-dessus l'image

alors vous voulez du rayon et de l'ombre?

pas d'ombre seulement rayon

un gradient aléatoire ou toujours à droite?

ça n'a pas d'importance je pense mais ça peut toujours être à droite par exemple

4 Réponses :

2
votes

Cela peut être fait en utilisant des triangles CSS sur les pseudo-éléments :: before et :: after ! Je les ai colorés avec des couleurs vives pour que vous puissiez voir ce qui se passe, mais il devrait être assez facile de les obtenir comme vous le souhaitez.

<div class="block"></div>

body {
  background: lightblue;
}

.block {
  background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
  border: 1px solid #fff;
  width: 300px;
  height: 150px;
  margin: 30px;
  position: relative;
}

.block::before,
.block::after{
  display: block;
  content: '';
  position: absolute;
  border: 150px solid transparent;
}

.block::before {
  border-top-width: 0;
  border-bottom-width: 25px;
  border-bottom-color: red;
  top: -25px;
}

.block::after {
  border-bottom-width: 0;
  border-top-width: 25px;
  border-top-color: green;
  bottom: -25px;
}

0 commentaires

4
votes

Une idée utilisant la transformation et la perspective où vous aurez la bordure, border-radius également le dégradé:

<div class="block"></div>

body {
  background: lightblue;
}

.block {
  overflow: hidden;
  width: 300px;
  height: 200px;
  margin: 20px;
  position: relative;
  z-index:0;
  filter:drop-shadow(0 0 5px #000);
}

.block::before,
.block::after {
  content: "";
  position: absolute;
  z-index:-1;
  border: 1px solid #fff;
  top: 0;
  bottom: 0;
  width: 50%;
  background-image: linear-gradient(35deg, blue, red);
  background-size: 200% 100%;
}

.block::before {
  left: 0;
  border-right: 0;
  border-radius: 15px 0 0 15px;
  transform-origin: right;
  transform: perspective(100px) rotateY(-5deg);
}

.block::after {
  right: 0;
  border-left: 0;
  border-radius: 0 15px 15px 0;
  transform-origin: left;
  transform: perspective(100px) rotateY(5deg);
  background-position: right;
}

Vous pouvez également ajouter l'ombre et changer facilement le dégradé:

<div class="block"></div>

body {
  background: lightblue;
}

.block {
  overflow: hidden;
  width: 300px;
  height: 200px;
  margin: 20px;
  position: relative;
  z-index:0;
}

.block::before,
.block::after {
  content: "";
  position: absolute;
  z-index:-1;
  border: 1px solid #fff;
  top: 0;
  bottom: 0;
  width: 50%;
  background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
  background-size: 200% 100%;
}

.block::before {
  left: 0;
  border-right: 0;
  border-radius: 15px 0 0 15px;
  transform-origin: right;
  transform: perspective(100px) rotateY(-5deg);
}

.block::after {
  right: 0;
  border-left: 0;
  border-radius: 0 15px 15px 0;
  transform-origin: left;
  transform: perspective(100px) rotateY(5deg);
  background-position: right;
}

5 commentaires

c'est bien, très bien mais la bordure est floue mais l'exemple fonctionne très bien

@ani_css oui la transformation affecte légèrement la bordure, je ne sais pas si nous pouvons l'éviter

quand j'ai dupliqué, c'est une ligne droite horizontalement

@ani_css vous voulez dire quoi par dupliqué ?

je veux dire que je copie ça plus d'un

3
votes

Vous pouvez le faire avec clip-path . Il existe un outil très simple qui pourrait vous aider: https://bennettfeely.com/clippy/ .

J'ai fait un exemple pour vous avec votre contenu:

<div class="block"></div>

body {
  background: lightblue;
}

.block {
  background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
  border: 1px solid #fff;
  width: 300px;
  height: 150px;
  margin: 30px;
  -webkit-clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
  clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
}

2 commentaires

ouais je connais le chemin du clip mais ce n'est pas ce que je veux

Ok, ne vous inquiétez pas - je pensais juste que je fournirais une solution simple à votre problème :-)

0
votes

Ajustez les mesures en fonction de vos exigences de forme exactes. Cela donne quelque chose de proche de ce que vous recherchez.

<div class="block"></div>

body{
background:lightblue;;
}
.block{ position: 
relative; width:200px; 
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
 }


}
.block:before
{ content: '';
position: absolute;
top: 20%; 
bottom: 20%; 
right: -5%; 
left: -5%; 
background: inherit;
border-radius: 5% / 50%;
}

0 commentaires