html中半圆怎么写,html 中画半圆的方法

html 中画半圆的方法

div{

display: inline-block;

}

.red{

background-color: red;

}

.green{

background-color: green;

}

#one{

transform: rotate(100deg);

}

#two{

transform: rotate(100deg);

}

.left-circle{

width: 100px;

height: 200px;

border-radius: 100px 0 0 100px;

transform-origin: 100px 100px;

}

.right-circle{

width: 100px;

height: 200px;

border-radius: 0 100px 100px 0;

margin-left: -5px;

transform-origin: 0 100px;

}

/*.up-circle{*/

/* height: 100px;*/

/* width: 200px;*/

/* border-radius: 100px 100px 0 0;*/

/* transform: rotateZ(180deg);*/

/*}*/

/*.down-circle{*/

/* height: 100px;*/

/* width: 200px;*/

/* border-radius: 0 0 100px 100px;*/

/*}*/

let count=0;

let app = new Vue({

el: '#app',

data: {

// transform:rotate(190deg);

one: {transform: 'rotate(' + count + 'deg)'},

two: {transform: 'rotate(' + count + 'deg)'},

},

});

setInterval(function(){

count=count+20;

app.one.transform = 'rotate('+count+'deg)';

app.two.transform = 'rotate('+count+'deg)';

console.log(count);

}, 1);