html - 半圆 CSS

转载作者：可可西里更新时间：2023-11-01 13:47:40

有什么办法可以解决这个问题吗？我尝试更改 border-radius 值并进行了大量搜索，只是为了实现下图中的设计。我想我错过了一些东西，任何人都可以指出我的风格有什么问题。

这是代码。

 #wrapper.toggled {
padding-left: 150px;
}

#sidebar-wrapper {
position: fixed;
left: 224px;
z-index: 1000;
overflow-y: auto;
margin-left: -345px;
height: 100%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-radius: 0% 80% 50% 0;
height: 400px;
overflow: hidden;

box-shadow: inset -1px 0px 100px 2px rgba(0, 0, 0, .4), 1px 0px 100px 1px rgba(255, 255, 255, .02);
}

#wrapper.toggled #sidebar-wrapper {
    width: 350px;
}

这是我的 HTML 代码

<div class="toggled" id="wrapper">
<div class="container-fluid">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-calendar"></span></a>
            </li>
            <li>
                <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-time"></span></a>
            </li>
            <li>
                <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-dashboard"></span></a>
            </li>
            <li>
                <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-user"></span></a>
            </li>
            <li>
                <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-cog"></span></a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid"></div>
    </div>
    <!-- /#page-content-wrapper -->
</div>

我想实现类似的功能，但我无法自定义边框。

最佳答案

这是我的带有悬停效果的完整代码

[![<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#sidebar-wrapper{ width:500px; height:500px;border-radius: 50%;margin-left: -25%; background:#183343;    margin-top: 67px;}
.new-con a {
    font-size: 30px;
    color: #fff !important;
    margin-left: 30px;
    display: block;
}
.dashboard-icon.new-con {
        position: absolute;
    margin-left: 394px;
    margin-top: 229px;
}
.user-div.new-con{     margin-left: 382px;
    position: absolute;
    margin-top: 312px;}

.inner-border{ background:url(icon/new1.png);}
.cog-icon.new-con {
    margin-top: 393px;
    position: absolute;
    margin-left: 336px;
}
.dasbord-icon-inner {
    background: url(icon/das-black.png);
    width: 32px;
    height: 32px;
       background-size: 32px 32px !Important;
    background-repeat: no-repeat;
}
#sidebar-wrapper {
    position: relative;
}
.dasbord-icon-inner{ background:url(icon/das-black.png);}
.time-icon.new-con {
       margin-top: 152px;
    position: absolute;
    margin-left: 378px;
}
/* Calender Icon Start */
.calender-div.new-con {
    margin-top: 84px;
    position: absolute;
    margin-left: 340px;

}
.calender-div .inner-border {
    background: url(icon/new1.png);
    width: 43px;
    height: 45px;
    margin-left: 15px;
    position: absolute;
    top: -31px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(-47deg); display:none;
}
.calender-div:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.calender-div:hover .inner-border{ display:block;}
.calender-div .inner-con{
       margin-left: 44px;
    position: absolute;
    top: -70px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(-47deg);
   display: none; 
    color: #000;
    font-size: 20px;}
.calender-div:hover .inner-con{ display:block;}

/* Calender Icon end */
/* Calender Icon Start */

.time-icon .inner-border {
       background: url(icon/new1.png);
        width: 43px;
    height: 45px;
    margin-left: 32px;
    position: absolute;
    top: -25px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(-24deg); display:none;
}
.time-icon:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.time-icon:hover .inner-border{ display:block;}
.time-icon .inner-con{
         margin-left: 82px;
    position: absolute;
    top: -46px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(-23deg);
   display: none; 
    color: #000;
    font-size: 20px;}
.time-icon:hover .inner-con{ display:block;}

/* Calender Icon end */
/* Dasbord Icon */

.dashboard-icon .inner-border {
      background: url(icon/new1.png);
    width: 43px;
    height: 45px;
    margin-left: 40px;
    position: absolute;
    top: -15px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(-4deg); display:none;
}
.dashboard-icon:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.dashboard-icon:hover .inner-border{ display:block;}
.dashboard-icon .inner-con{
       margin-left: 94px;
    position: absolute;
    top: -13px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(-4deg);
    display: none;
    color: #000;
    font-size: 20px;}
.dashboard-icon:hover .inner-con{ display:block;}

/* Dasbord Icon end */



/* User Icon */

.user-div .inner-border {
      background: url(icon/new1.png);
    width: 43px;
    height: 45px;
    margin-left: 31px;
    position: absolute;
    top: 11px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(21deg);
    display: none;
}
.user-div:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.user-div:hover .inner-border{ display:block;}
.user-div .inner-con{
           margin-left: 82px;
    position: absolute;
    top: 36px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(14deg);
    display: none;
    color: #000;
    font-size: 20px;}
.user-div:hover .inner-con{ display:block;}

/* User Icon end */

/* Last Icon */

.cog-icon .inner-border {
     background: url(icon/new1.png);
    width: 43px;
    height: 45px;
    margin-left: 15px;
    position: absolute;
    top: 12px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(47deg);
    display: none;
}
.cog-icon:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.cog-icon:hover .inner-border{ display:block;}
.cog-icon .inner-con{
            margin-left: 57px;
    position: absolute;
    top: 82px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(38deg);
    display: none;
    color: #000;
    font-size: 20px;
    width: 100px;}
.cog-icon:hover .inner-con{ display:block;}

/* Last Icon end */


</style>
</head>

<body>
<div id="sidebar-wrapper">

                <div class="calender-div new-con">
                <a href="#"><div class="dasbord-icon-inner"></div>
                <div class="inner-border"></div>
                <div class="inner-con">Calander</div>
                </a>
                </div>

                <div class="time-icon new-con">
                    <a href="#">
                      <div class="dasbord-icon-inner"></div>
                      <div class="inner-border"></div>
                      <div class="inner-con">Alarm</div>

                    </a>
               </div>

               <div class="dashboard-icon new-con">
                <a href="#">
                <div class="dasbord-icon-inner"></div>
                <div class="inner-border"></div>
                <div class="inner-con">Dasbord</div>

                </a>
            </div>

             <div class="user-div new-con">
                <a href="#">
                <div class="dasbord-icon-inner"></div>
                <div class="inner-border"></div>
                <div class="inner-con">Uesr</div>
                </a>
            </div>

            <div class="cog-icon new-con">
                <a href="#">
                  <div class="dasbord-icon-inner"></div>
                  <div class="inner-border"></div>
                  <div class="inner-con">Last Icon</div>

                </a>
          </div>


</div>


</body>
</html>][1]][1]

关于html - 半圆 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39888223/

文章推荐： PHP SoapClient 请求作为客户端 IP 而不是服务器 IP 接收

文章推荐： php - 有没有等同于 javascripts a = b && b.c || 的 php？ d

文章推荐： php - 从数组中删除符合 PHP 中特定条件的项目

将Container的Flutter夹部分制成两个半圆(半圆)
在 flutter 打中，我想剪辑Container的可选部分以制作此小部件: 裁剪小部件，使其顶部和底部有两个半圆。对于此裁剪的小部件的某些功能，我希望具有一些可选功能，例如: 剪裁顶部，该可选内
Flutter 如何画半圆(半圆)
我怎样才能画这样的半圆？代码: class DrawHalfCircleClipper extends CustomClipper { @override Path getClip(Size
c++ - 检测图像中的切口/半圆
下面是一个二值图像，我想在其中检测“山丘”、半圆、切口……在下图中的红色圆圈中。检测不一定要精确，我只需要知道图片中有这样的东西即可。我正在考虑使用一种线扫描方法并计算线上的黑色像素并用某种“聪明人”
html - 半圆 CSS
有什么办法可以解决这个问题吗？我尝试更改 border-radius 值并进行了大量搜索，只是为了实现下图中的设计。我想我错过了一些东西，任何人都可以指出我的风格有什么问题。这是代码。 #wrap
html - 带线段的 CSS 半圆
我正在尝试创建一个有 5 个线段的半圆，如下图所示，我可以在其中轻松调整各个线段之间的间距以及线段本身的大小。 CSS 半圆示例我是前端开发的新手，但我尝试了几种资源，以便在来这里之前自己解决这个问
html - 着色 CSS 半圆
我做了一个半圆，我想按照我需要的百分比给它上色。文本的位置暂时无关紧要。我想要的是将 50% 的边框着色。稍后我将需要 70% 和 80%。我该怎么做？ .info__radius__outline
html - SVG 半圆 : Why is it rotated?
我正在试验 SVG 元素。我正在尝试创建一个简单的半圆，但由于某种原因我的半圆旋转了？如何让半圆不旋转？我的方法是: SVG“ Canvas ”为 400 x 400 像素，半圆的半径为 180 像
html - 创建 CSS 半圆
我有一个包含如下数字的实心圆圈: 我如何将它分成两个半圆，以便我可以在其中存储两个不同的数字，如下所示: 我的 CSS 如下: .oval { display: inline-block;
html - 无法删除标题中 html 页面中的白色补丁(半圆)
我正在开发一个 Asp.Net MVC 应用程序，其中有一个布局页面，我在其中看到一个像半圆的白色补丁，我试图删除但没有成功。 CSS html { background-color: bla
c# - WPF/C#画半圆/半圆
我需要在 WPF 中绘制一个半圆/半圆。知道怎么做吗？感谢您的任何提示! 最佳答案 ArcSegment将是一个很好的起点。和here是如何在代码中使用它的一个很好的例子。关于c# - WPF/C
html - 半圆 donut chart highchart，里面嵌入了文本
我正在使用 Highcharts js，我正在尝试用 highCharts 绘制饼图这是一个半圆，里面嵌入了一些文本。和到目前为止我所做的是我的 html 标记是
html - 在 CSS 中制作带有圆边的微笑/马蹄形/半圆
我正在用一张婴儿的动画脸制作一些 CSS 动画，我正在尝试将嘴巴创建为特定的微笑形状。我需要的形状看起来像这样。注意左上角和右上角的圆 Angular : 你可以看到我到这里最近的。唯一缺少的是圆滑的
r - 使用 rCharts 创建 NVD3 半圆 donut
我正在尝试使用 rCharts 创建一个简单的半圆 donut 和 NVD3 JavaScript 库。下面提供了一个完整的 donut 的最小可重复示例。 library(rCharts) data
javascript - 如何使用 Hightchart-ng 制作 Highcharts 半圆 donut chart
我正在尝试在我的 Angular 应用程序中创建一个 Highcharts 半圆圆环图。我已经安装了 Highcharts-ng 指令。无论出于何种原因，它似乎完全跳过了 plotOptions 部分

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 半圆 CSS

我想实现类似的功能，但我无法自定义边框。