谈话边框效果

by gnepud

HTML

<div class="tips">
    <div class="tips-text">
        Lorem ipsum dolor sit amet.
    </div>
    <div class="tips-angle diamond"></div>
</div>

CSS

*{padding:0;margin:0;}
    body{padding:20px;font:16px/1.5 Georgia;}
    
    .diamond{
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.7071067811865475,
        M12=-0.7071067811865477,
        M21=0.7071067811865477,
        M22=0.7071067811865475,
        SizingMethod='auto expand'
    );
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform:rotate(45deg);
    }
    :root .diamond{filter:none\9;}
    
    .tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;}
    .tips-angle{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px\9;left:10px;}