html边框变箭头,CSS3 各个方向的信息框箭头

CSS

语言：

CSSSCSS

确定

/* Fonts */

@import "https://fonts.googleapis.com/css?family=Pacifico";

/* Variables for box and CSS triangles */

/* End Variables */

* {

box-sizing: border-box;

}

html,

body {

min-height: 100%;

}

body {

font-size: 16px;

}

header {

font-family: 'Pacifico', cursive, Sans-Serif;

font-size: 48px;

color: #4d4d4d;

text-align: center;

margin: 45px 0 15px;

}

header span {

display: block;

}

header small {

font-size: 50%;

color: #999999;

}

.wrapper {

width: 620px;

height: auto;

display: block;

margin-left: auto;

margin-right: auto;

}

/* box styles */

.box {

width: 260px;

height: 173.33333px;

float: left;

margin: 25px;

background-color: #d66c5c;

padding: 15px;

border-radius: 3.25px;

position: relative;

}

.box .triangle {

width: 0;

height: 0;

position: absolute;

z-index: 1;

border-width: 13px;

border-style: solid;

border-color: transparent;

}

.box .triangle.top {

border-bottom-color: #d66c5c;

top: -26px;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.box .triangle.right {

border-left-color: #d66c5c;

right: -26px;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.box .triangle.bottom {

border-top-color: #d66c5c;

bottom: -26px;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.box .triangle.left {

border-right-color: #d66c5c;

left: -26px;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

/* End of box */

/* CSS for p tags */

p {

position: absolute;

top: 0;

left: 0;

width: 260px;

height: 173.33333px;

text-align: center;

line-height: 173.33333px;

color: white;

font-family: 'Pacifico', cursive, Sans-Serif;

font-size: 36px;

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}