圆,半径自适应外层高度

原创 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>

示例输出
这里写图片描述

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

习题 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,塔以外无建筑物。...
  • navicheung
  • navicheung
  • 2017年08月06日 17:25
  • 1415

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

内层div展示新闻,内容或多或少,因此内层div做成自适应高度。height:auto!important;height:400px;min-height:400px; 外层div也做成自适应高度。...
  • z69183787
  • z69183787
  • 2014年01月27日 15:11
  • 4513

【c语言】有4个圆塔。圆心分别为(2,2),(-2,2),(-2,-2),(2,-2),圆半径为1,这4个塔的高度为10, 塔以外无建筑物,今输入任意一点的坐标,求该点的建筑高度(塔外高度为0)

// 有4个圆塔。圆心分别为(2,2),(-2,2),(-2,-2),(2,-2),圆半径为1,这4个塔的高度为10, // 塔以外无建筑物,今输入任意一点的坐标,求该点的建筑高度(塔外高度为0) ...
  • zhaoyaqian552
  • zhaoyaqian552
  • 2015年04月23日 12:34
  • 4560

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

http://developer.51cto.com/art/201009/225428.htm 这里向大家描述一下解决DIV嵌套时外层(父层)无法自适应高度的方法,原本自己写的CSS代码是...
  • mituan1234567
  • mituan1234567
  • 2015年04月16日 16:19
  • 265

入门训练-圆的面积

入门训练-圆的面积 问题描述 给定圆的半径r,求圆的面积。 输入格式 输入包含一个整数r,表示圆的半径。 输出格式 输出一行,包含一个实数,四舍五入保留小数点后7位,表示圆的面积。 ...
  • weixinru4631260
  • weixinru4631260
  • 2016年03月04日 20:46
  • 796

ACM——01——1002: 【入门】已知一个圆的半径,求解该圆的面积和周长 【运算符】

题目描述 请不要笑。用来适应环境的题目,自然比较简单些。 已知一个圆的半径,求解该圆的面积和周长 C++新手说明: 由于题目要求结果要保留2位小数,所以需要用到C++的格式化输出,下面是一个例子 下面...
  • Mereco_321
  • Mereco_321
  • 2015年02月07日 17:03
  • 1667

java小例子:打印一个近似圆,要求根据给定半径圆的大小随之发生改变

如题:通过API文档查询Math类方法,打印如下所示的近似圆,只要给定不同的半径,圆的大小随之发生改变。 import java.lang.Math; ...
  • Monarch_lin
  • Monarch_lin
  • 2013年03月15日 23:02
  • 3793

子窗口操作父窗口自适应高度<iframe></iframe>

这不是跨域,且我不喜欢用定时器判断,父窗口load事件已适应子窗口高度,但如果后续操作会改变高度将不会适应新高度,且父窗口的click,mouse事件只有边框能触发,不用定时器去随时判断,那就只有从子...
  • wang845252276
  • wang845252276
  • 2016年11月18日 10:45
  • 1132

蓝桥杯练习系统入门题——圆的面积

问题描述 给定圆的半径r,求圆的面积。         输入格式 输入包含一个整数r,表示圆的半径。      输出格式 输出一行,包含一个实数,四舍五入保留小数点后7位,表示圆的面积。 ...
  • agony_sun
  • agony_sun
  • 2017年01月11日 17:37
  • 423

圆上的整数点

题目描述 假设圆的圆心位于(0,0),半径为 r ,请问半径为 r 的圆上有多少个整点? 整点 (x,y) ,即 x、y 均为整数。 输入 第一行一个正整数 T,表示测试数据的组数 ( 1 接下来每行...
  • to_flydream
  • to_flydream
  • 2016年12月06日 20:26
  • 169
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:圆,半径自适应外层高度
举报原因:
原因补充:

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