css 直角三角形 特殊三角形 对话气泡

直角三角形

{

width: 0px;

height: 0px;

border-width:15px 15px 15px 5px;

border-style:solid;

border-color:transparent transparent gray gray;

}



{

width: 0px;

height: 0px;

border-width:15px 15px 15px 5px;

border-style:solid;

border-color:transparent transparent gray gray;

}

/*

对话气泡

用法：使用.speech-bubble和.speech-bubble-DIRECTION类

<div class="speech-bubble speech-bubble-top">Hi there</div>

*/

.speech-bubble {

position: relative;

background-color: #292929;

width: auto;

height: 50px;

line-height: 150px; /* 垂直居中 */

color: white;

text-align: center;

border-radius: 0 2px 2px 2px;

font-family: sans-serif;

font-size: 8px;

}

.speech-bubble:after {

content: '';

position: absolute;

width: 0;

height: 0;

border: 15px solid;

}

/* 箭头的位置 */

.speech-bubble-top:after {

border-bottom-color: transparent transparent gray gray;

left: 0;

bottom: 100%;

margin-left: -15px;

}

.speech-bubble-right:after {

border-left-color: #292929;

left: 100%;

top: 50%;

margin-top: -15px;

}

.speech-bubble-bottom:after {

border-top-color: #292929;

top: 100%;

left: 50%;

margin-left: -15px;

}

.speech-bubble-left:after {

border-right-color: #292929;

top: 50%;

right: 100%;

margin-top: -15px;

}