圆,半径自适应外层高度

原创 2016年06月01日 15:32:46

效果可查看https://codepen.io/GitKou/pen/OXPggx
这里写图片描述
HTML:

 <div class="m-edge" style="margin-top: 50px">
        <div class="semicircle leftSemiCircle"></div>
        <div class="dashedLine"></div>
        <div class="semicircle rightSemiCircle"></div>
 </div>

CSS:

.m-edge {
    position: relative;
    height: 100px;/* 高度任意更改,半圆不变形*/
    margin: 0 -1px;
    overflow: hidden;
}

.dashedLine {
    border-bottom: 1px dashed #A0A0A0;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.semicircle {
    position: absolute;
    border: 1px solid #b1b1b1;
    border-radius: 50%;
    height: 100%;
    writing-mode: vertical-lr;
    z-index: 1000;
    background: #fff;
    box-sizing: border-box;
}

.semicircle:after {
    content: "";
    padding-left: 100%;
    display: block;
}

.leftSemiCircle {
    left: -0.5px;
    transform: translateX(-50%);
}

.rightSemiCircle {
    right: -0.5px;
    transform: translateX(50%);
}

注意几点:
1.水平居中用到了:

   position: absolute;
    top: 50%;
    transform: translateY(-50%);

2.半径随外层高度而改变:用到了 writing-mode: vertical-lr;垂直方向书写;核心代码如下“

<div class="m-edge">
  <div class="semicircle">
  </div>
</div>


.semicircle {
    position: absolute;
    border: 1px solid #b1b1b1;
    border-radius: 50%;
    height: 100%;
    writing-mode: vertical-lr;
    z-index: 1000;
    background: #fff;
    box-sizing: border-box;
}

.semicircle:after {
    content: "";
    padding-left: 100%;
    display: block;
}
.m-edge{
  height:550px;/* 可修改*/
  position:relative;
}

.semicircle:after的 padding-left: 100%;会以父元素semicircle 的height做为基准,应为 writing-mode: vertical-lr;
这里写图片描述

writing-mode:
    horizontal-tb
    Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line.
    vertical-rl
    Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.
    vertical-lr
    Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.

另外dashline可以用svg的dasharray来画
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray

<?xml version="1.0"?>
<svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
    <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />

<style><![CDATA[line{    stroke: black;    stroke-width: 2;}]]></style>
</svg>

示例输出
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

IE8下DIV嵌套出现外层自适应高度(四种解决方法)

升级了IE8,发现了好些问题,一开始用IE6和IE7都没有的新问题出现了,总归时间有余,就四处查阅解决办法,大概就是以下的四种方法! 当b1和b2都是float=le...

DIV嵌套时外层无法自适应高度三种解决方案

这里向大家描述一下解决DIV嵌套时外层(父层)无法自适应高度的方法,原本自己写的CSS代码是没有错误的,但是为什么在新版的浏览器中会发现使用DIV嵌套时外层(父层)无法自适应高度的错误,这里看一下解决...

IE8下DIV嵌套出现外层自适应高度

IE8下DIV嵌套出现外层自适应高度(四种解决方法) 升级了IE8,发现了好些问题,一开始用IE6和IE7都没有的新问题出现了,总归时间有余,就四处查阅解决办法,大概就是以下的四种方法!当b1和b2都...

高度自适应布局

  • 2017年11月30日 14:17
  • 1KB
  • 下载

button自适应高度和自动换行

  • 2016年07月14日 17:37
  • 74KB
  • 下载

习题 4.12 有4个圆塔,圆心分别为(2,2)、(-2,2)、(-2,-2)、(2,-2),圆半径为1,这4个塔的高度为10m,塔以外无建筑物。今输入任一点的坐标,求该点的建筑高度(塔外的高度为零)

C程序设计 (第四版) 谭浩强 习题5.12 个人设计习题 5.12 有4个圆塔,圆心分别为(2,2)、(-2,2)、(-2,-2)、(2,-2),圆半径为1,这4个塔的高度为10m,塔以外无建筑物。...

iOS 高度自适应

  • 2016年07月19日 15:35
  • 31KB
  • 下载

jQuery自适应宽度跟高度相册代码

  • 2015年07月18日 19:38
  • 1.03MB
  • 下载

解决 外层div高度不随内层div高度改变

内层div展示新闻,内容或多或少,因此内层div做成自适应高度。height:auto!important;height:400px;min-height:400px; 外层div也做成自适应高度。...

门户窗口高度自适应插件

  • 2013年10月16日 09:26
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:圆,半径自适应外层高度
举报原因:
原因补充:

(最多只允许输入30个字)