CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-04 10:08:38

원래의

2681명이 탐색했습니다.

먼저 삼각형을 만드는 방법에 대해 이야기하겠습니다. 웹사이트를 방문하면 탐색 표시줄에 몇 가지 삼각형이 표시될 것입니다. 예:

NetEase의 헤더 메뉴 표시줄에 있습니다. 홈페이지에도 이런 삼각형이 있을 겁니다

CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명

마우스가 넘어가면 삼각형이 수직으로 뒤집히는데 아래와 같이

CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명

지금은 테두리를 주로 활용하여 삼각형 만드는 방법을 공유합니다

우선 4개의 삼각형을 합쳐서 정사각형, 즉 정사각형의 네 개의 테두리가 합쳐져 형성된 4개의 삼각형입니다

소스코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方形</title>
    <style>
    .p{   
        width: 0px;   
        height: 0px;   
        border-top:50px solid red;         
        border-bottom:50px solid green;   
        border-left:50px solid yellow;   
        border-right:50px solid blue;   
        /*注意：四条边框的宽度必须相同！*/   
}   
    </style>
</head>
<body>
    <p class="p"></p>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명

자, 테이크 아웃 삼각형 중 하나를 제거하려면 실제로 다른 하나를 제거해야 합니다.

소스 코드 숨기기:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作三角形箭头</title>
    <style>
    .arrow{   
        width:0;   
        height:0;   
        border-top:50px solid #000;     /*设置并显示上边框*/   
        border-bottom:none;             /*不设置下边框*/   
        border-left:50px solid transparent;     /*设置但隐藏左边框*/   
        border-right:50px solid transparent;    /*设置但隐藏右边框*/   
    }   
    .arrow:hover{   
        border-top:none;                  /*鼠标经过时，不设置上边框*/   
        border-bottom:50px solid #000;    /*鼠标经过时，设置并显示下边框*/   
    }   
    </style>
</head>
<body>
    <p class="arrow"></p>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명

다음으로 버튼 방식을 공유하겠습니다

주로 보더 스타일, 박스 섀도우, 의사 클래스 효과를 이용해 구현합니다.

소스코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS制作按钮</title>
    <style type="text/css">
    .btn{   
        width:100px;   
        height:100px;   
        background:#ccc;   
        border-radius:50%;   
        box-shadow:5px 5px 10px #000;   /*设置外阴影*/   
    }   
    .btn:active{   
        background:#bbb;   
        box-shadow:5px 5px 10px #000 inset;    /*设置内阴影*/   
    }   
    .btn p{   
        font-size:30px;   
        font-family:"微软雅黑";   
        color:blue;   
        float:left;   
        margin-top:28px;   
        margin-left:20px;   
    }   
    </style>
</head>
<body>
    <p class="btn">
        <a href="###">
            <p>开始</p>
        </a>
    </p>
</body>
</html>

로그인 후 복사

효과:

CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명