Tiêu đề với background bo góc tròn

Trở về

  • 4,219

Trong một số design có sử dụng image có góc tròn, hay có độ lặp lại, nếu dùng được border-radius thì tốt, nhưng nếu là design đặc biệt thì việc dùng background image cũng hết sức cần thiết.

Background image góc bo tròn

Background image góc bo tròn, với cách sử dụng image có chiều rộng cố định, sử dụng 2 image trên và dưới ta sẽ có dạng image với chiều cao có thể thay đổi được, chiều rộng tùy theo cách cắt image.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_corner_bottom.gif) no-repeat left bottom;
    font-size: 160%;
    font-weight: bold;
}
.headline span {
    background: url(https://hocwebchuan.com/images/chuyende/bg_corner_top.gif) no-repeat left top;
    display: block;
    padding: 10px 20px;
}
</style>
</head>
<body>
<h2 class="headline"><span>Tiêu đề h2</span></h2>
</body>
</html>

Hiển thị trình duyệt:

Download file để thực hành

Background image góc bo tròn với icon.

Background image góc bo tròn, với link có icon.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
.headline {
    background: url(https://hocwebchuan.com/images/chuyende/bg_corner_bottom.gif) no-repeat left bottom;
    font-size: 160%;
    font-weight: bold;
}
.headline span {
    background: url(https://hocwebchuan.com/images/chuyende/bg_corner_top.gif) no-repeat left top;
    display: block;
    padding: 10px 20px;
}
.headline a {
    background: url(https://hocwebchuan.com/images/chuyende/ico_world.png) no-repeat left 8px;
    color: #5d0ab3;
    padding-left: 23px;
    text-decoration: none;
}
.headline a:hover {
    text-decoration: underline;
}
</style>
</head>
<body>
<h2 class="headline"><span><a href="http://hocwebchuan.com">Tiêu đề h2</a></span></h2>
</body>
</html>

Hiển thị trình duyệt:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.