老师，箭头怎么画-慕课网

在这里输入代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .sanjiaoxing { width: 0; border: 10px solid transparent; border-bottom: 10px solid red; } .circle { width: 100px; height: 100px; border-radius: 50%; background: green; } .shanxing { width: 100px; height: 100px; border-radius: 100px 0 0 0; background: blue; } </style> </head> <body> <div class="sanjiaoxing"></div> <div class="circle"></div> <div class="shanxing"></div> </body> </html>

4回答

freemen 回答被采纳获得+3积分 2021-09-29 11:42:47

可以尝试实现一下。箭头的原理就是两个叠在一起的三角型。上面的三角形颜色跟底色保持一致

0 回复有任何疑惑可以回复我~

收起回答

提问者一心励志当码农 #1
```
非常感谢！
```
回复有任何疑惑可以回复我~ 2021-09-29 14:59:04
freemen #2
```
您客气了
```
回复有任何疑惑可以回复我~ 2021-09-29 14:59:38

幕布斯8089534 2021-11-18 12:27:33

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用css画三角形</title>
<style>
.container {
width: 500px;
margin: 100px auto;
}

.triangle {
height: 0;
width: 0;
border: 50px solid transparent;
border-left-color: red;
}

.arrow-1 {
width: 50px;
height: 50px;
border: 1px solid transparent;
border-top-color: red;
border-right-color: red;
transform: rotate(45deg);
}

.arrow-2 {
position: relative;
height: 0;
width: 0;
border: 50px solid transparent;
border-left-color: red;
}

.arrow-2::before {
content: '';
position: absolute;
/* 左移动多一点像素来错开 */
left: -55px;
top: -50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: white;
}

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen;
}

.sector {
width: 100px;
height: 100px;
border-radius: 100px 0 0 0;
background-color: blue;
}
</style>
</head>

<body>
<div class="container">
<div class="triangle"></div>
<div class="arrow-1"></div>
<div class="arrow-2"></div>
<div class="circle"></div>
<div class="sector"></div>
</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

幕布斯8089534 2021-11-18 12:26:45

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用css画三角形</title>
<style>
.container {
width: 500px;
margin: 100px auto;
}

.triangle {
height: 0;
width: 0;
border: 50px solid transparent;
border-left-color: red;
}

.arrow-1 {
width: 50px;
height: 50px;
border: 1px solid transparent;
border-top-color: red;
border-right-color: red;
transform: rotate(45deg);
}

.arrow-2 {
position: relative;
height: 0;
width: 0;
border: 50px solid transparent;
border-left-color: red;
}

.arrow-2::before {
content: '';
position: absolute;
/* 左移动多一点像素来错开 */
left: -55px;
top: -50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: white;
}

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen;
}

.sector {
width: 100px;
height: 100px;
border-radius: 100px 0 0 0;
background-color: blue;
}
</style>
</head>

<body>
<div class="container">
<div class="triangle"></div>
<div class="arrow-1"></div>
<div class="arrow-2"></div>
<div class="circle"></div>
<div class="sector"></div>
</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

freemen 2021-09-29 11:41:07

两个三角形加定位

0 回复有任何疑惑可以回复我~

收起回答

老师，箭头怎么画

正在回答

4回答

相似问题

请选择置顶位置

本课精华内容