【在做任务十二header部分的返回小图标一直都是用的图片，如何用纯css实现呢？ _CSS图标】

在做任务十二header部分的返回小图标一直都是用的图片，如何用纯css实现呢？

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(3)

CSS图标

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>护工个人主页</title>
	<link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="task12-1.css">
</head>
<body>
    <header>
        <a href="task12-2.html"><</a>
        <span>个人主页</span> 
    </header>
    <main>
        <div class="background">
            <div><img src="../task5/images/head.png"></div>
            <p>高素雅 51岁<br>
            <img src="../task5/images/icon-1.png" class="dingwei">
            <span>北京·通州·报纸林</span>
            </p>
        </div>
        <p>专业技能</p><hr>
        <div class="list">
            <p><span class="red">☆</span><span class="left-text-first">住家</span><span class="red">☆</span><span>不含餐</span></p><hr>
            <p><span class="left-text">从业年限</span>0~3</p><hr>
            <p><span class="left-text">工作时间</span>全天</p><hr>
            <p><span class="left-text">服务价格</span><span class="red">25元/小时</span></p><hr>
            <div class="last">
                <div class="myself">
                    <span>自我介绍</span>
                </div>
                <div class="oneself">
                    <span>可以洗衣、做饭、照顾老人。在护工方面有5年的经验，经验丰富</span>
                </div>
            </div><hr>
        </div>
    </main>
    <footer>
        <button class="btn-left">留言</button>
        <button class="btn-right">电话联系</button>
    </footer>
</body>
</html>
a {
    color: #ffffff;
    text-decoration: none; }
  
  html {
    font-size: 625%; }
  
  body {
    margin: 0.4rem 0 0.5rem;
    padding: 0;
    font-size: .18rem; }
  
  header {
    position: fixed;
    top: 0;
    text-align: center;
    line-height: .40rem;
    width: 100%;
    color: #ffffff;
    background: #5fc0cd; }
    header a {
      position: absolute;
      left: 0;
      padding: 0 .15rem; }
  
  main {
    margin: .40rem 0 .50rem 0; }
    main .background {
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 2rem;
      background: url(../task5/images/bg.png) no-repeat;
      background-size: cover; }
      main .background div {
        width: .80rem;
        height: .80rem;
        padding: 0 .30rem; }
      main .background .dingwei {
        position: relative;
        top: .08rem;
        transform: scale(0.6); }
      main .background span {
        font-size: .12rem; }
      main .background img {
        max-width: 100%;
        max-height: 100%; }
    main > p {
      margin-left: .18rem;
      padding-left: .18rem;
      border-left: 2px solid #5fc0cd; }
    main .list {
      padding: 0 .18rem; }
      main .list .red {
        color: #e26163;
        font-weight: 500; }
      main .list .left-text-first {
        color: black;
        padding-right: .20rem;
        margin-right: .20rem;
        border-right: 1px #999999 solid; }
      main .list .left-text {
        color: #999999;
        width: 1.12rem;
        padding: 0 .20rem;
        margin-right: .20rem;
        border-right: 1px #999999 solid;
        white-space: nowrap; }
      main .list .last {
        display: flex;
        align-items: center; }
        main .list .last .myself {
          color: #999999;
          position: absolute;
          width: 1.12rem;
          border-right: 1px #999999 solid;
          text-align: center;
          white-space: nowrap; }
        main .list .last .oneself {
          margin-left: 1.35rem; }
  
  footer {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: .50rem;
    width: 100%;
    background: #ffffff; }
    footer .btn-left {
      padding: 0;
      outline: none;
      border: 1px solid #5fc0cd;
      border-radius: .1rem;
      width: 48%;
      height: .40rem;
      font-size: .18rem;
      color: #5fc0cd;
      background: #ffffff; }
    footer .btn-right {
      padding: 0;
      outline: none;
      border: 1px solid #5fc0cd;
      border-radius: .1rem;
      width: 48%;
      height: .40rem;
      font-size: .18rem;
      color: #ffffff;
      background: #5fc0cd; }

编辑于2024-09-07

时间排序

热门排序

[郑州|结业弟子]JS-徐海达
1

css实现三角形是一个基本操作。首先，我们打开百度，然后搜索css实现三角。
content: '';
position: absolute;
top: -89px;
left: 2px;
border-top: 89px solid transparent;
border-right: 99px solid #FFFFFF;
border-bottom: 99px solid transparent;
链接：https://blog.csdn.net/qq_34645412/article/details/78062304
与哪里的话，你可以自己去看一下，并不是很复杂.

查看全部>

编辑于2019-04-03
[成都|荣耀师兄]JS-李文龙
1

css其实能够实现很多形状的，三角箭头是一种很基础的形状，，分享一个网页，上面有很多形状的写法：http://www.webhek.com/post/40-css-shapes.html

查看全部>

编辑于2019-04-03
[无名弟子]QA-张杰
0

一开始我也是用的图片,后来师兄说 , 简单的图形都尽量自己画, 后来百度后发现好多形状都能画出来, 比如五角星等. 多用百度,能搜出想不到的答案.

查看全部>

编辑于2019-06-26

去第页