모서리가 둥근 CSS의 탭과 같은 구조

둥근 모서리가있는 CSS 사각형이 있습니다. 그 위에 구조와 같은 탭을 추가하고 싶습니다.모서리가 둥근 CSS의 탭과 같은 구조

이것은 내가 말하고자하는 것입니다.

나는 두 개의 다른 요소를 만들고 위치 지정과 함께 추가하려고했지만 실제 그림자가 보이지 않습니다. l. CSS로 단일 요소로 만들 수 있습니까?

미리 감사드립니다.

내가 조정할 할

#mybox 
{ 
width: 800px; 
height:400px; 
border:thin; 
border-radius: 10px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-color:black; 
box-shadow: 3px 3px 10px 5px #000; 
}

/this과 같이 할 수있는 상단 부분을 스트레칭 :

편집 (자세한 내용은) 다음과 같이

나는 둥근 테두리 사각형을 가지고있다.

출처

2013-03-20 WhatisSober

을 시도 것을 :

여기에 빠른 구현은 당신이 그것을 사용하는 방법에 대한 아이디어를 제공 할 수있어? 사소한 수정이 필요할 수도 있습니다. –

사용할 수있는 텍스트를 가질 수 있음을 의미로 사용한다 : 선택은 당신이 요구하는지 무엇을 만들 수 있습니다 전에. 당신은 적어도 우리에게 보여줄 수는

<div class="foo"></div> 

.foo { 
    width: 200px; 
    height: 100px; 
    border: 4px solid #000; 
    margin-top: 24px; 
    position: relative; 
    -webkit-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.foo:before { 
    display: block; 
    height: 20px; 
    width: 30px; 
    border: 4px solid #000; 
    border-bottom-width: 0; 
    content: " "; 
    position: absolute; 
    left: 0; 
    top: -24px; 
    background: #fff; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
}

출처

2013-03-20 04:10:21

이것은 내가 찾고 있었던 것이다. 감사합니다 Drawrdesign, 감사! – WhatisSober

탭 기능이있는 부트 스트랩 또는 jquery UI처럼 미리 패키징 된 것을 사용하지 않는 이유는 무엇입니까? 나는 당신이 당신 자신의 물건을 만들고 싶어하는지 이해할 수있다. 그러나 아마 지름길을 원할까?

부트 스트랩 : http://twitter.github.com/bootstrap/

JQuery와 UI : http://jqueryui.com/

거기 UI 개발을 도울 수 많은 같은 패키지가 있지만 이러한 두 가지 일반적인 것들

출처

2013-03-20 03:57:48 Tucker

굉장하고, jquery-ui는 더 나은 옵션처럼 보입니다. 감사! – WhatisSober

이 코드를 시도하다 ...

<div style="width: 93px; height: 72px;"> 
    <div style="width: 93px; height: 13px; background-image: url('tabtop.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div> 
    <div style="width: 93px; height: 59px; background-image: url('tabbottom.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: left top"></div> 
</div>

아래 이미지가있는 경우 ... div로 이미지 크기를 조절하면 요 u는 괜찮을과 배경 속성을 사용하면 실제 div의

enter image description here

출처

2013-03-20 04:03:46 Zeddy

코드를 복사하여 새로운 html 파일에 붙여 넣기 만하면 실제 페이지를 사용자 정의 할 때 DIVS의 크기가 이미지와 동일한 크기인지 확인하십시오. – Zeddy

실제로 문제는 그림자입니다. 이미지를 사용하는 경우 사전에 그림자를 추가해야합니다. 가능한 한 적은 이미지를 사용하려고합니다. 고마워요. – WhatisSober

마지막 편집 이후 CSS를 추가 했으므로 지금 당장은 내 솔루션이 아니지만 나중에 다시 살펴 보겠습니다. – Zeddy

모서리가 둥근 CSS의 탭과 같은 구조

답변

관련 문제