겹쳐 나는 다음과 같은 상황이 CSS

enter image description here

는 "꼬리"를 이미지.

텍스트가 너무 길어 이미지에 맞지 않을 수 있으므로 텍스트 흐름을 이미지에서 멀리두고 싶습니다 (전체 텍스트 길이 표시). 흰색 배경에 흰색 텍스트가 보이지 않도록하려면 이미지와 같은 색상의 div를 만들어야합니다.

어떻게 이미지가 하단에있는 사업부의 "나가"할 수 CSS에 표시하기 :

는 다음 바이올린 http://jsfiddle.net/ZtJc9/

<ul id="menu"> 
    <li>Item 1, Long description</li> 
    <li>Item 3</li> 
    <li>Item 1</li> 
</ul> 

li { 
    background: url(blueImageWithTail.jpg); 
    height:(imageWITHOUTtailHeight)px; 
    float:left; 
    background-color: blue; 
    color: white; 
}

질문에 보라?

출처

2014-07-18 serhio

을 달성하기 위해 나는 ::before를 사용? 이미지 너비 또는 이미지 너머까지 텍스트가 잘리는 텍스트? – Katstevens

이것은 최선의 해결책은 아니지만 찾고자하는 것이어야합니다. http://jsfiddle.net/webtiki/ZtJc9/1/ –

@serhio : 내가 묻는 것을 이해하지 못했습니다. 나는 훨씬 더 잘 이해할 수있다. –

왜 css3을 사용하지 않습니까? 여기에 당신의 바이올린의 업데이트 된 버전이 있습니다. 색깔은 같지 않지만 당신을 돕기를 바랍니다. 당신이 일이 원하는 무엇이

http://jsfiddle.net/LaJFN/12/

출처

2014-07-18 13:06:52

CSS3의 인상적인 사용! 감사! 내가 CSS3를 지원하지 않는 브라우저와의 호환성을 두려워하는 유일한 이유는 ... 그러나 여러 moz 및 웹킷 사용을 보았습니다 .... – serhio

(Firefox의 "corner"는 일부 "white"라인으로 표시되지만 Opera의 경우는 제외) http://jsfiddle.net/LaJFN/14/ – serhio

겹쳐 나는 다음과 같은 상황이 CSS

답변

관련 문제