Maison interface Web tutoriel HTML Comment dessiner un triangle en utilisant la propriété CSS border

Comment dessiner un triangle en utilisant la propriété CSS border

Jul 17, 2017 pm 03:06 PM
border triangle

Utiliser des bordures pour dessiner des triangles est en fait une compétence étrange.

utilise une fonctionnalité de la bordure : lorsque la largeur et la hauteur d'un élément sont toutes deux égales à 0, définissez la largeur de la bordure (définissez la largeur d'au moins 2 bordures adjacentes), et la bordure soutiendra cet élément.

Lorsque la largeur des quatre bordures est définie en même temps, les quatre côtés convergent finalement vers un point au centre de l'élément.

Ainsi, lorsque nous définissons une bordure pour un élément avec une largeur et une hauteur, les quatre bordures sont connectées en diagonale plutôt qu'à angle droit, comme le montre l'image :

Donc la largeur et la hauteur ne sont pas définies, ce qui donne quatre Lorsque les bordures sont définies respectivement sur des couleurs différentes, vous pouvez obtenir 4 triangles de couleurs différentes et de directions différentes :

Lorsque vous souhaitez obtenir un triangle, vous ne pouvez pas définir une bordure distincte. Lorsque vous définissez une seule bordure, il s'agit simplement d'une ligne avec uniquement une largeur et aucune hauteur. , et ne peut pas être affiché sur la page ;

Par conséquent, vous devez toujours définir 4 bordures en même temps ou définir la largeur de deux bordures adjacentes, et ajouter une couleur à une seule des bordures :

Set 4 bords :

Ne définissez que deux bords adjacents :

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!

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Programme Java pour calculer l'aire d'un triangle à l'aide de déterminants Programme Java pour calculer l'aire d'un triangle à l'aide de déterminants Aug 31, 2023 am 10:17 AM

Introduction Le programme Java pour calculer l'aire d'un triangle à l'aide d'un déterminant est un programme concis et efficace qui peut calculer l'aire d'un triangle à partir des coordonnées de trois sommets. Ce programme est utile à toute personne qui apprend ou travaille avec la géométrie, car il montre comment utiliser les calculs arithmétiques et algébriques de base en Java, ainsi que comment utiliser la classe Scanner pour lire les entrées de l'utilisateur. Le programme demande à l'utilisateur les coordonnées de trois points du triangle, qui sont ensuite lues et utilisées pour calculer le déterminant de la matrice de coordonnées. Utilisez la valeur absolue du déterminant pour vous assurer que l'aire est toujours positive, puis utilisez une formule pour calculer l'aire du triangle et l'afficher à l'utilisateur. Le programme peut être facilement modifié pour accepter des entrées dans différents formats ou pour effectuer des calculs supplémentaires, ce qui en fait un outil polyvalent pour les calculs géométriques. rangs de déterminants

Que signifie la bordure en HTML Que signifie la bordure en HTML Feb 26, 2021 pm 03:49 PM

Border signifie bordure en HTML. Border est un attribut de bordure qui peut définir tous les styles de bordure dans une seule instruction. La syntaxe est [Object.style.border=borderWidth borderStyle borderColor].

Programme C++ pour imprimer une table de multiplication sous forme de triangle Programme C++ pour imprimer une table de multiplication sous forme de triangle Sep 15, 2023 pm 01:21 PM

Pour mémoriser certains résultats de multiplication de base sous forme tabulaire ou graphique, utilisez la table de multiplication. Cet article explique comment utiliser C++ pour générer une table de multiplication qui ressemble à un triangle rectangle. La notation triangulaire est efficace dans les rares cas où un grand nombre de résultats peuvent être facilement mémorisés. Dans ce format, le tableau est affiché ligne par ligne et colonne par colonne, chaque ligne contenant uniquement les entrées qui remplissent cette colonne. Pour résoudre ce problème, nous avons besoin d’instructions de boucle de base en C++. Pour afficher les nombres de manière triangulaire, nous avons besoin de boucles imbriquées pour imprimer chaque ligne une par une. Nous verrons comment résoudre ce problème. Voyons l'algorithme et la mise en œuvre pour une meilleure compréhension. L'algorithme prend le nombre de lignes de la table de multiplication souhaitée, disons n. Pour i de 1 à n, procédez comme suit. Pour j allant de 1 à i,

Comment trouver la hauteur minimale d'un triangle en fonction de sa base et de son aire en Java ? Comment trouver la hauteur minimale d'un triangle en fonction de sa base et de son aire en Java ? Aug 26, 2023 pm 10:25 PM

Nous avons l'aire 'a' et la base 'b' du triangle. Conformément à l'énoncé du problème, nous devons trouver la hauteur minimale « h » à l'aide du langage de programmation Java. Comme nous le savons, lorsque la base et la hauteur sont données, l'aire d'un triangle est −$$\mathrm{area\:=\:\frac{1}{2}\:*\:base\:*\ : Height}$$ En utilisant la formule ci-dessus, nous pouvons obtenir la hauteur à partir de -height=(2*area)/base puis en utilisant la méthode intégrée ceil(), nous pouvons obtenir la hauteur minimale. Montrez quelques exemples pour vous montrer la traduction chinoise de l'instance-1 : Exemple-1 Supposons que l'aire donnée = 12 et la base = 6, puis utilisez la formule

L'apparence du Huawei P70 est exposée, le module triangulaire ajoute de nouvelles preuves Art Forme irrégulière L'apparence du Huawei P70 est exposée, le module triangulaire ajoute de nouvelles preuves Art Forme irrégulière Mar 05, 2024 pm 08:16 PM

Il a été précédemment rapporté que le produit phare de l'imagerie 5G de la série P70 de Huawei devrait être lancé fin mars et que trois nouveaux modèles, P70, P70Pro et P70Art, devraient être lancés. Désormais, plus d'informations sur la conception de l'apparence de ces nouveaux téléphones ont été exposées. Comme vous pouvez le voir sur l'image ci-dessus, la dernière image divulguée montre que la série Huawei P70 est la même que les rumeurs précédentes. Il est prévu que les modules arrière des P70 et P70Pro adoptent la déco triangulaire (voir le modèle central dans la photo). photo ci-dessus), tandis que le P70Art sera basé sur le Deco triangulaire. Quelques changements, plus audacieux et irréguliers. Ci-dessus, le boîtier de téléphone portable tiers Huawei P70 exposé par @digitalchatstation. Que pensez-vous si la série Huawei P70 finit par ressembler à ceci ? Information historique

Explorer les propriétés du modèle de boîte CSS : remplissage, marge et bordure Explorer les propriétés du modèle de boîte CSS : remplissage, marge et bordure Oct 20, 2023 pm 03:09 PM

Exploration des propriétés du modèle de boîte CSS : padding, margin et border Le modèle de boîte CSS est l'un des concepts importants dans la mise en page Web. Dans le développement front-end, il est essentiel de comprendre et d’utiliser correctement les attributs padding, margin et border. Cet article approfondira l'utilisation et la corrélation de ces trois propriétés et fournira des exemples de code spécifiques. 1. Introduction au modèle de boîte Le modèle de boîte se compose de quatre parties : contenu, padding, bo

Quelle est l'aire du plus grand triangle pouvant être inscrit dans un rectangle ? Quelle est l'aire du plus grand triangle pouvant être inscrit dans un rectangle ? Aug 30, 2023 pm 01:37 PM

Un rectangle est un quadrilatère dont les côtés opposés sont égaux et parallèles. Les côtés adjacents forment 90°. Un triangle est une figure fermée à trois côtés. Le plus grand triangle inscrit dans un rectangle. La base est égale à la longueur du rectangle et la hauteur du triangle est égale à la largeur du rectangle. Aire = (½)*l*b Aire du plus grand triangle inscrit dans un rectangle = (½)*l*b Programme pour calculer l'aire du plus grand triangle dans un rectangle - exemple de code #include<stdio. h>intmain(void){ intl= 10,b=9; zone flottante=(f;

Comment résoudre le problème de pixel 1px sur le terminal mobile Vue Comment résoudre le problème de pixel 1px sur le terminal mobile Vue Jun 30, 2023 pm 06:21 PM

Comment résoudre le problème du pixel 1px du côté mobile dans le développement de Vue Avec le développement rapide de l'Internet mobile, la demande d'applications mobiles augmente de jour en jour. Cependant, la diversité des tailles d’écran des appareils mobiles et des densités de pixels pose certains défis aux développeurs. L'un des problèmes courants est le problème de pixel 1px sur mobile. Cet article explique comment résoudre le problème du pixel 1px du côté mobile dans le développement de Vue. La racine du problème La racine du problème des pixels 1px du côté mobile réside dans l'inadéquation entre les pixels physiques de l'appareil mobile et les pixels indépendants de l'appareil. Pixels indépendants de l'appareil (comme CSS

See all articles