css简单实现带箭头的边框

原文地址 https://tianshengjie.cn/artic...

css简单实现带箭头的边框

普通边框

<style>
    .border {
        width: 100px;
        height: 50px;
        border: 1px solid red;
    }
</style>
<div class="border"></div>

实现由四个三角形组成的正方形

<style>
    .triangle {
        width: 0;
        height: 0;
        border: 100px solid red;
        border-right-color: green;
        border-left-color: blue;
        border-top-color: black;
    }
</style>
<div class="triangle"></div>

向下三角形

<style>
    .triangle-bottom {
        width: 0;
        height: 0;
        border: 100px solid transparent;
        border-top-color: red;
    }
</style>
<div class="triangle-bottom"></div>

将左右下边颜色设置为透明 transparent,得到向下的箭头

将三角形放入边框中

<style>
    .border-triangle {
        width: 100px;
        height: 50px;
        border: 1px solid red;
        position: relative;
    }

    .border-triangle:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-top-color: red;
        left: 50%;
        margin-left: -4px;
        bottom: -8px;
    }
</style>
<div class="border-triangle"></div>

将三角形设置为绝对定位,利用margin-left和left 定位到元素中间,bottom设置-8px,靠近边框底部居中

带箭头的边框

<style>
    .border-triangle-bottom {
        width: 100px;
        height: 30px;
        border: 1px solid #1d9cd6;
        position: relative;
        border-radius: 4px;
    }

    .border-triangle-bottom:after,
    .border-triangle-bottom:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 4px solid transparent;
        border-top-color: #1d9cd6;
        left: 50%;
        margin-left: -4px;
        bottom: -8px;
    }

    .border-triangle-bottom:after {
        border-top-color: #fff;
        bottom: -7px;
    }
</style>
<div class="border-triangle-bottom"></div>

将边框颜色换成好看的蓝色,将before和after伪元素都设置为绝对定位,定位到边框底部剧中,将after伪元素设置成白色,底部偏移量大于before 1px,遮住三角形底部的颜色。这样一个好看的箭头边框就实现了

原文地址:https://www.cnblogs.com/homehtml/p/11833993.html

时间: 2024-10-11 05:09:41

css简单实现带箭头的边框的相关文章

css实现带箭头选项卡

这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手机和电脑的屏幕显示图片的画质细节不同,导致1px的边框比1px的切图实际粗很多,对于有强迫症的人来说心里总是不舒服的……后来我就想,屁大点的箭头直接用css写一个算了.可是以前没写过,那就研究一下吧.网上有很多这方面的资料,但是还是那句话,那都是人家的不是自己的,要想据为己有自己也写篇博客吧. 这种

div+css制作带箭头提示框效果图(原创文章)

一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的时候发现,哇!原来这么简单,我这脑袋瓜咋没反应过来呢,所以整理了下顺便简化了分享出来,希望对大家有帮助. <div class="demo"></div> <style>.demo{    width:0;    height:0px;    borde

圆角带箭头的提示框css实现

css是一个很强大的东西,很多网页效果,我们可以通过css直接实现.今天给大家分享的是一个用css实现的圆角带箭头的提示框. 效果如下图: 这一个样式主要涉及到了css的边框样式border的运用和定位样式position. 实现代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角带箭头的框</title&

CSS带箭头的DIV方框,自适应高度

<html><head><title>CSS实现带箭头的DIV方框</title><style>s{position:absolute;top:-20px;*top:-22px;left:20px;display:block;height:0;width:0;font-size: 0; line-height: 0;border-color:transparent transparent #666 transparent;border-style

使用纯CSS实现带箭头的提示框

爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>使用纯CSS实现带箭头的提示框</title> <script src="https://cdn.bootcss.com/jqu

带箭头阴影的提示框,CSS代码,IE不兼容

<html><head><title>带箭头阴影的提示框</title><style> .wrap{position:relative;}.bd{background:#BDCEEF;width:301px;height:101px;margin:10px;position:relative;z-index:2;box-shadow: 5px 8px 11px rgba(0,0,0,0.4);-webkit-box-shadow: 5px 8px

使用Less制作带箭头提示框

这里使用Less来制作带箭头的提示框,跟css比起来,方便多了,可以剩下很多的代码,别的不扯了,先看看效果吧. 这里我实现了4个方向的提示框,下面是具体实现代码: 提示框代码: <div class="top_prompt"> <div class="top_triangle"> <span class="line"></span> <span class="back"&g

Android自定义ViewGroup(一)——带箭头的圆角矩形菜单

今天要做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽度.箭头

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"