【css技术指南笔记】div css 实现三角形
博客专区 > 郑二 的博客 > 博客详情
【css技术指南笔记】div css 实现三角形
郑二 发表于3年前
【css技术指南笔记】div css 实现三角形
  • 发表于 3年前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0
<style>
    .triangle{
        border:10px solid;
        border-color:transparent transparent #444 transparent;//设置一个方向有颜色,其他方向透明
        width:0;
        height:0;
    }
</style>
<div class="triangle"></>


实现一个带箭头(指向)的div框

<style>
    .talk{
        width:100px;
        height:100px;
        border:1px solid #444;
        position:relative;//方便箭头定位
    }
    .talk::after{
        content:"";
        border:10px solid;
        border-color:transparent #444 transparent transparent;
        width:0;
        height:0;
        position:absolution;
        top:50px;
        right:100%;//放到 div 的最左边
    }
</style>
<div class="talk"></div>


共有 人打赏支持
粉丝 0
博文 18
码字总数 4318
×
郑二
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: