css画变形的半圆

问题描述

问 题

如图这样的半圆怎么画呢？

解决方案

这个代码能生成那个图形（需要d3.js和初中数学-两个圆外切的几何计算）

var cont = d3.select(".container");
var R = 50;
cont.selectAll("div").remove();
cont.style({
    "position": "relative",
    "width": R*6.472+"px",
    "height": R*3+"px"
})
var topdiv = cont.append("div")
                .classed("top", true);
var btmdiv = cont.append("div")
                .classed("btm", true);
topdiv.style({
    "position":"absolute",
    "top":0,
    "left": 0,
    "width": R*6.472+"px",
    "height": R*2+"px",
})
btmdiv.style({
    "position":"absolute",
    "top":R+"px",
    "left": 0,
    "width": R*6.472+"px",
    "height": R*2+"px",
})
var topls = topdiv.append("div")
                .classed("topside", true)
                .style({
                    "left": 0,
                    "width":R*1.745+"px",
                    "height": 2*R+"px",
                    "position":"absolute",
                    "background-color":"darkorange"
                })
var topmid = topdiv.append("div")
                .classed("topmid", true)
                .style({
                    "left": R*1.236+"px",
                    "width": R*4+"px",
                    "height": 2*R+"px",
                    "border-bottom-left-radius": R*2+"px",
                    "border-bottom-right-radius": R*2+"px",
                    "z-index": "10",
                    "position":"absolute",
                    "background-color":"darkorange"
                })
var toprs = topdiv.append("div")
                .classed("topside", true)
                .style({
                    "right": 0,
                    "width": R*1.745+"px",
                    "height": 2*R+"px",
                    "position":"absolute",
                    "background-color":"darkorange"
                })
var btmls = btmdiv.append("div")
                .classed("topside", true)
                .style({
                    "left": 0,
                    "width":R*2+"px",
                    "height": R*2+"px",
                    "border-top-right-radius": R+"px",
                    "position":"absolute",
                    "background-color":"lightseagreen"
                })
var btmmid =btmdiv.append("div")
                .classed("topmid", true)
                .style({
                    "left": R*1.745+"px",
                    "width": R*2.982+"px",
                    "height": R*2+"px",
                    "position":"absolute",
                    "background-color":"lightseagreen"
                })
var btmrs = btmdiv.append("div")
                .classed("topside", true)
                .style({
                    "right": 0,
                    "width": R*2+"px",
                    "border-top-left-radius": R+"px",
                    "height": R*2+"px",
                    "position":"absolute",
                    "background-color":"lightseagreen"
                })
                
                
                
                

或者直接使用生成的HTML是：

这个是实际的图层结构：

<div class="container" style="background-color: whitesmoke; position: relative; width: 323.6px; height: 150px;">

    <div class="top" style="position: absolute; top: 0px; left: 0px; width: 323.6px; height: 100px;"><div class="topside" style="left: 0px; width: 87.25px; height: 100px; position: absolute; background-color: darkorange;"></div><div class="topmid" style="left: 61.8px; width: 200px; height: 100px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; z-index: 10; position: absolute; background-color: darkorange;"></div><div class="topside" style="right: 0px; width: 87.25px; height: 100px; position: absolute; background-color: darkorange;"></div></div><div class="btm" style="position: absolute; top: 50px; left: 0px; width: 323.6px; height: 100px;"><div class="topside" style="left: 0px; width: 100px; height: 100px; border-top-right-radius: 50px; position: absolute; background-color: lightseagreen;"></div><div class="topmid" style="left: 87.25px; width: 149.1px; height: 100px; position: absolute; background-color: lightseagreen;"></div><div class="topside" style="right: 0px; width: 100px; border-top-left-radius: 50px; height: 100px; position: absolute; background-color: lightseagreen;"></div></div></div>

这篇关于css画变形的半圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！