css3效果联系（太极图、对话框）

最新推荐文章于 2023-04-22 13:30:32 发布

软件测试进阶中

最新推荐文章于 2023-04-22 13:30:32 发布

阅读量359

点赞数

文章标签： css

本文链接：https://blog.csdn.net/hard_days/article/details/82863663

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	#taiji {
		width: 0px;
		height: 600px;
		border-left: 300px solid red;
		border-right: 300px solid green;
		border-radius: 100%;
	}
 
	#taiji::before {
		content: '';
		display: block;
		width: 100px;
		height: 100px;
		border: 100px solid red;
		border-radius: 100%;
		background-color: green;
		margin-left: -150px;
	}
 
	#taiji::after {
		content: '';
		display: block;
		width: 100px;
		height: 100px;
		border: 100px solid green;
		border-radius: 100%;
		background-color: red;
		margin-left: -150px;
	}
 
 
</style>
<body>
	<div id="taiji">
		
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            margin: 300px 300px;
        }
        .dialog{
            width: 200px;
            height: 100px;
            display: inline-block;
            background-color: red;
            position: relative;
        }
        .top {
            width: 31px;
            height: 46px;
            position: absolute;
            top: -2px;
            left: 211px;
            border-bottom-right-radius: 20px 50px;
            background-color: white;
            border-left: 1px solid #fff;
            transform: rotate(65deg);
            z-index: 9;
        }
        .bottom {
            margin-top: 20px;
            width: 50px;
            height: 50px;
            position: absolute;
            border-bottom-right-radius: 50px 50px;
            background-color: red;
            border-bottom: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="dialog"></span>
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
</body>
</html>

软件测试进阶中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3效果联系（太极图、对话框）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;style type="text/css&quot
复制链接

扫一扫