Use css to create a simple prompt box and use css to create

Use css to create a simple prompt box and use css to create

In web development, some prompt boxes are often used to guide users in order to improve user experience. Here we will share some simple prompt box production.

1. First, it is similar to a button in the upper right corner of a rectangle.

Here we mainly use some positioning knowledge. Using relative and absolute, we can quickly create such a prompt box. For details, click here

Html code:

<Div id = "position"> <div class = "position-relative"> <span> message </span> <a href = "javascript :; "> <I class =" icon "> & times; </I> </a> </div>

Css code:

　　　　 #position {          　position: relative;         　 width: 500px;         　 height: 400px;            margin: 0 auto;         　 color: #fff;         　 background: #66cccc;　　　　 } 　　　　#position .position-relative {            position: relative;            top: 20px;            left: 20px;            width: 300px;            height: 200px;            padding: 20px;            background: #999;        }        #position .position-relative .icon {            display: block;            position: absolute;            top: -10px;            right: -10px;            overflow: hidden;            /*            white-space: nowrap;            text-overflow: ellipsis;            */            border-radius: 50%;            width: 20px;            height: 20px;            line-height: 20px;            color: #eee;            font-style: normal;            text-align: center;            background: #666;        }

2. There is a dialog box similar to this qq

With the positioning knowledge, this dialog box is mainly made of the small triangle on the left. In fact, we can use border to create this dialog box. First, let's start with an example:

Let's look at a span tag.

Html

<span class="icon-s"></span>

Css

.icon-s {            display: block;            margin: 0 auto;            width: 0;            height: 0;            border-style: solid;            border-width: 40px;            border-top-color: red;            border-right-color: blue;            border-bottom-color: yellow;            border-left-color: black;}

Let's take a look at the effect:

How about it! It's amazing, right! In fact, here we can see the triangle we want. We only need to keep one of the four triangles, so we can set the other three sides to transparent.

Css

.icon-s {            display: block;            margin: 0 auto;            width: 0;            height: 0;            border-style: solid;            border-width: 40px;            border-top-color: transparent; /*-*/            border-right-color: red;            border-bottom-color: transparent; /*-*/
            border-left-color: transparent; /*-*/
}

. Icon-s {display: block; margin: 0 auto; width: 0; height: 0; border-style: solid; border-width: 40px; border-top-width: 0; // border-right-width: 70px; // border-top-color: transparent; border-right-color: red; border-bottom-color: transparent; border-left-color: transparent ;}

In this way, the triangle on the left comes out. Let's simplify the Code:

.icon-s {            display: block;            margin: 0 auto;            width: 0;            height: 0;            border-style: solid;            border-color: transparent red transparent transparent;            border-width: 0 70px 40px 40px;}

Considering that earlier IE versions do not support the transparent attribute, we can set dotted or dashed.

The reason is that in IE6, the dotted line and dotted line are based on the border width. The dotted line length must be more than three times its width (height> = border-width * 3 ), the width of the dotted line must be more than 5 times the width (height> = border-width * 5). Otherwise, the dotted line and dotted line will not appear.

.icon-s {            display: block;            margin: 0 auto;            width: 0;            height: 0;            border-style: dashed solid dashed dashed;            border-color: transparent red transparent transparent;            border-width: 0 70px 40px 40px;        }

 

Complete demo:

<! Doctype html>