CSS3 перевернутый закругленный угол
Используйте FindWindowEx () , чтобы найти дескриптор (HWND), а затем отправить сообщение WM_SETTEXT с помощью SendMessage ()
При использовании FindWindowEx вам необходимо сначала найти дескриптор главного окна, используя его имя класса. Затем вам нужно будет найти дескриптор любого контейнера, в котором находится текстовое поле, вызывая FindWindowEx, передавая дескриптор родителя (окна) и имя класса контейнера. Вам нужно будет повторить это, пока не дойдете до текстового поля. Вы можете использовать инструмент под названием Spy ++ , который по умолчанию устанавливается Visual Studio для проверки целевого приложения и определения иерархии контейнеров (все объекты действительно называются окнами в API, но я их вызываю контейнеры в отличие от окна верхнего уровня) с именами классов.
3 ответа
Ну, это чистое безумие, но, конечно, есть способы достичь этого :-) не кроссбраузерно, но давайте посмотрим:
Наша разметка:
<div id="bubble">
<p>This is madness!</p>
</div>
Наш CSS:
#bubble {
width:200px;
height:100px;
border:1px solid #000;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
#bubble p {
margin: 1em;
font-family:Comic Sans MS;/* well, madness it is! */
}
#bubble:before {
content:'';
border:20px solid;
border-color:#fff transparent transparent;
position:absolute;
top:110px;
left:25px;
z-index:2;
}
#bubble:after {
content:'';
border:20px solid;
border-color:#000 transparent transparent;
position:absolute;
top:111px;
left:25px;
z-index:1;
}
Результат: http://jsfiddle.net/MrLWY/
Я тестировал это только в Firefox 3.6.3, но идея понятна :-)
Вот дубль два:
#bubble {
width:200px;
height:100px;
border:1px solid #000;
position:relative;
-webkit-border-radius:20px 20px 20px 0;
-moz-border-radius:20px 20px 20px 0;
border-radius:20px 20px 20px 0;
}
#bubble p {
margin: 1em;
font-family:Comic Sans MS;
}
#bubble:before {
content:'';
width:20px;
height:20px;
background:#fff;
border-left:1px solid #000;
position:absolute;
top:100px;
left:-1px;
}
#bubble:after {
content:'';
-webkit-border-radius:20px 0 0 0;
-moz-border-radius:20px 0 0 0;
border-radius:20px 0 0 0;
border:solid #000;
border-width:1px 0 0 1px;
width:20px;
height:19px;
position:absolute;
top:100px;
left:0;
}
И результат: http://jsfiddle.net/ajeN7/
Возможно, это можно улучшить разными способами:
- сделать кроссбраузерным (+webkit и opera, по крайней мере)
- это может работать в IE, без округлений, правда, с помощью чего-то вроде этого http://code.google.com/p/ie7-js/ (чтобы работал сгенерированный контент).
- выяснить, как это может работать с гибкой высотой.
- изменить объявление font-family :-)
, если вы пытаетесь добиться такого вида (речь воздушный шар) лучше всего использовать для этого изображение :)
Это достигает эффекта в FF. Для других браузеров используйте соответствующие варианты border-radius.
По сути, вы используете систему из 3 div, один из которых имеет тот же цвет, что и фон.
Это работает только для фона с ровным цветом.
<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>
И CSS:
body
{
background-color:red;
}
.top
{
display: block;
width: 200px;
height: 50px;
background-color:white;
padding:5px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
}
.bottom
{
display: block;
width: 20px;
height: 20px;
background-color: white;
}
.bottom2
{
display: block;
width: 20px;
height: 20px;
background-color: red;
-moz-border-radius-topleft:20px;
}