집 > 기사 > 웹 프론트엔드 > CSS로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명

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

高洛峰원래의: 2017-03-04 10:08:382624검색

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

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

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

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로 삼각형과 버튼을 만드는 간단한 예에 대한 자세한 설명

효과가 아름답지 않을 수도 있고 개선이 필요할 수도 있습니다. 모두가 자신의 능력을 발휘할 수 있습니다. 상상력을 발휘하여 더 나은 결과를 얻으시기 바랍니다.

CSS를 사용하여 삼각형과 버튼을 만드는 위의 간단한 예는 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며 PHP 중국어 웹사이트를 지원해 주시길 바랍니다.

CSS로 삼각형과 버튼을 만드는 간단한 예제에 대한 자세한 예는 PHP 중국어 웹사이트에서 관련 기사를 주목해주세요!

성명：

이전 기사：캔버스에 만화경 효과를 구현한 예다음 기사：캔버스에 만화경 효과를 구현한 예