A prompt box with an arrow

来源：互联网发布：南风知我意2书包网编辑：程序博客网时间：2024/06/04 21:08

Today I need to use a prompt box with an arrow to prompt people.So I use css+div to make it.I will show you how to do.
Before you do it,be sure to know some knowledge about box model of css.

box model
Padding, border and margin are optional and their default value are zero.

As you can see in the first picture,the colorful parts are border.We can set value of width and height to control border.(For convenience,I set padding zero).
这里写图片描述

If the width and height are zero,then you can see the following picture.
这里写图片描述

We can make all of four parts transparent first and second set border-bottom-color blue.Then you can get a blue triangle,put the triangle and a div together and you will get the prompt box with an arrow!

<html><head><style>.demo{    width:200px;    height:200px;    border:2px solid gray;    position:absolute;    background-color:gray;    top:100px;    left:100px;}.myTriangle{    position:absolute;        width:0;        height:0px;        border:20px solid transparent;        border-bottom-color:gray;          top:-40px;        left:20%;        }</style></head><body><div class="demo">    <div class="myTriangle"></div>    <label style="color:white">This is a paragraph.</label></div></body></html>

Result:
这里写图片描述
You can also change the shape of the triangle by using the following elements.

0 0