Maison > Article > interface Web > Comment obtenir une présentation d'images en forme d'éventail en CSS3

Comment obtenir une présentation d'images en forme d'éventail en CSS3

WBOYoriginal: 2021-12-16 17:13:432509parcourir

Méthode : 1. Utilisez l'attribut "border-radius" pour définir l'élément carré en forme d'éventail. La syntaxe est "border-radius: square width value 0 0;"; :url (picture path) ;}" L'instruction peut définir l'image d'arrière-plan de l'élément en forme d'éventail.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment réaliser un affichage d'images en forme d'éventail en CSS3

En CSS, vous pouvez utiliser l'attribut border-radius et l'attribut background-image pour réaliser un affichage d'images en forme d'éventail.

L'attribut border-radius peut définir un élément carré en forme d'éventail, puis utiliser l'élément background-image pour définir une image d'arrière-plan pour l'élément en forme d'éventail.

L'exemple est le suivant :

<!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>
  <style>
  div{
 border-radius:200px 0 0;
  width: 200px;
  height: 200px;
  background-image:url(1118.02.png);
}
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Résultat de sortie :

Comment obtenir une présentation dimages en forme déventail en CSS3

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 border background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quels sont les nouveaux attributs de bordure en CSS3 ?Article suivant：Quels sont les nouveaux attributs de bordure en CSS3 ?

Articles Liés

Voir plus