首页 > 其他分享 >如何用纯CSS绘制三角形--03

如何用纯CSS绘制三角形--03

时间:2024-08-20 20:51:49浏览次数:17  
标签:03 dropdown -- content color 用纯 background border display

下拉菜单中的箭头通常用于提示用户点击以展开菜单。CSS三角形实现这个箭头:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三角形应用示例 - 下拉菜单箭头</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f9f9f9;
            margin: 0;
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            font-size: 16px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .dropdown-arrow {
            margin-left: 10px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 7px solid white;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 160px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            margin-top: 10px;
        }
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">
            下拉菜单
            <div class="dropdown-arrow"></div>
        </button>
        <div class="dropdown-content">
            <a href="#">选项 1</a>
            <a href="#">选项 2</a>
            <a href="#">选项 3</a>
        </div>
    </div>
</body>
</html>

标签:03,dropdown,--,content,color,用纯,background,border,display
From: https://www.cnblogs.com/zx618/p/18370299

相关文章

  • 可持久化数据结构1
    非持久化数据结构一般需要维护数据集最新状态,而可持久化要求查询历史状态。可持久化Trie树朴素:每次修改重新存一遍\(->MLE\)。正解:只存被修改部分,其余不变,即第\(i\)次修改后,树变为第\(i\)次修改产生新的部分加上前\(i-1\)次修改产生部分。增长同规模。用普通线段树维......
  • Linux多进程
    进程的概述进程是计算机科学中的一个基本概念,它指的是在操作系统中正在执行的程序的实例在Linux操作系统中,进程是程序执行的实体,是资源分配的基本单位在在Ubuntu中,通过使用ps命令可以查看当前的进程列表psaux进程与程序的区别定义:程序:程序是一组指令的集合,它们被编写......
  • C# read excel file via ExcelDataReader
    Install-PackageExcelDataReader usingExcelDataReader;usingSystem.Text;usingSystem.IO;namespaceConsoleApp50{internalclassProgram{staticvoidMain(string[]args){ReadExcel("aaa.xls");......
  • QTday4
    思维导图 第二题 widget.h#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>#include<QTime>#include<QTimerEvent>#include<QTextToSpeech>QT_BEGIN_NAMESPACEnamespaceUi{classWidget;}QT_END_NAMESPACEclassWidget:public......
  • feehicms 文件上传
    侵权声明本文章中的所有内容(包括但不限于文字、图像和其他媒体)仅供教育和参考目的。如果在本文章中使用了任何受版权保护的材料,我们满怀敬意地承认该内容的版权归原作者所有。如果您是版权持有人,并且认为您的作品被侵犯,请通过以下方式与我们联系:[[email protected]]。我们将在确......
  • 2、coredump文件的配置
    1、开启core文件的生成使用ulimit-a命令查看是否打开core文件,如果大小为0,则表明没有打开,如果非0,则表明打开,本人虚拟机上已经设置为unlimited,所以已经打开(1)临时打开使用ulimit-c命令打开,如设置为无限制,则使用ulimit-cunlimited(2)永久打开sudovim /etc/security/limits.c......
  • 性能测试中如何确定TPS和并发数
    性能测试中,最难的就是需求不明,无法获取到有效的需求指标,造成测试工作无法推进。所以,我给大家一个预估TPS和并发数的公式。1、 计算平均的并发用户数:C=nL/T 公式1中:c是平均的并发用户数;n是loginsession的数量;L是loginsession的平均使用时长;T是考察的时间段长度。2、并发用户......
  • mormot2 json操作
    mormot2json操作procedureTcrud.select;vardb:Tdb;pool:Tdbpool;jo:Tdocvariantdata;i:integer;beginjo.init;trytrypool:=GetDBPool(DBID);db:=pool.Lock;fori:=0tohigh(sqls)dobeginDB.sele......
  • vue切换组件基础模板
    需求:登录注册两个按钮,点击登录的时候登录显示,点击注册的时候注册显示,另外一个隐藏如下图所示先定义两个template组件<templateid="login"><div><h2>用户登录</h2><p>用户名:<inputtype="text"v-model="us......
  • 二分查找法
    二分查找法定义:二分查找也称折半查找(BinarySearch),它是一种效率较高的查找方法。前提:​1.必须采用顺序存储结构。​2.必须按关键字大小有序排列。我们以一个练习题为例:假如有一组数为3,12,24,36,55,68,75,88要查给定的值24.思路:可设三个变量front,mid,end分别指向数据......