Maison interface Web tutoriel HTML div+css实现带三角箭头提示框_html/css_WEB-ITnose

div+css实现带三角箭头提示框_html/css_WEB-ITnose

Jun 24, 2016 pm 12:27 PM

带三角箭头的提示框,就是下面所示:

这是一个提示框

通常我们都用图片来实现上面那个小三角,因为这样方便快速,但是如果图片处理得不好,会看起来有杂边,从而影响视觉,所以换一种思路来解决。

首先来研究一下CSS是如何实现三角形的。

假定有一个盒子(div),给定宽高分别为100像素,再给定边框50像素,那么它看起来会是下面这个样子(为了更直观,给了边框四种不同的颜色):

 

接下来,把盒子的高度设为0:

再把宽度也设为0:

这样雏形就已经出来了,由于IE6的bug(高度为0的div会有一定默认的高度,我的电脑上测量结果为19像素),需要做一些小调整,给div加一个overflow:hidden,IE6就能正确解析了。

接下来的工作就是去掉其余的三个边框。以向上箭头为例,假如我想让箭头朝上,那么就需要将左、上、右三条边框的颜色给去掉。一个常规的方法是将这三条边框的颜色设为透明,即transparent属性。

border-color:transparent transparent #056F61
Copier après la connexion

设置以后可以看到如下效果:

这样CSS制作的三角形就完成了。到这里看起来工作好像差不多可以结束的样子,还需要测试一下浏览器的兼容性,经过测试,主流浏览器都支持,但是打开IE6,结果悲催了,居然是这个样子(T-T) :

排查一下哪个地方出了问题,才发现原来IE6不支持transparent属性,如之奈何?前面已经做了这么多工作,总不能倒在IE6下吧。

于是上网查了一下IE6支持transparent的方法,结果是需要使用滤镜。不过这个方案肯定不行,要使用滤镜的话,还不如直接用图片。之后再研究了一下,

发现如果将其余三条边的属性由solid改为dotted或者dashed就可以了:

/*border-style:solid*/border-style:dotted dotted solid;border-width:50px;border-color:transparent transparent #056f61; 
Copier après la connexion

这样看起来IE6就“支持”transparent属性了。为什么会这样呢?这个问题我还没搞明白。经过测试发现,如果将盒子的边框类型设置为dashed,在IE6下会有一个奇特的行为:

当盒子的宽高为100像素,边框的宽度为34像素且类型为dashed时,边框就会消失,设为33像素时又显示了,而且这个比例是一定的。

这也许就解释了为什么将边框类型改为dashed时IE6显示“正常”了。

当边框类型为dotted时,IE6显示如下:

将盒子的宽高设为0时黑点消失,此时IE6也显示“正常”了。

虽然IE6的解析可能有问题,但是总算“解决”了其不支持transparent的bug。

接下来的工作就很简单了,如法炮制一个三角形,背景和提示框一致,将其叠加到之前的三角形上,只留一像素的边,再将其定位到提示框上。

可以根据需求制作左右和下边的三角。

以上是个人的一些心得体会,如果有不对的地方还请各位指正。

源码: 带三角箭头的提示框

------------------------------

转载请注明出处。

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)

HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

See all articles