Replies: 2 comments 1 reply
-
It is by design. Sciter offers arbitrary shapes by using vector images. So: <html>
<head>
<title>Test</title>
<style>
@media { /* conventional browser */
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
}
@media sciter { /* guess what? */
.triangle-up {
width: 100px;
height: 100px;
fill:red; stroke:none;
background: url(path: M 0 100 L 50 0 L 100 100 Z);
background-size:100%;
}
}
</style>
</head>
<body>
<div class="triangle-up"></div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Also making non-rectangular shapes by hacking borders in browsers is an UB (undefined behavior). For example 10 years ago at W3C we were discussed different options for that: So we may have gradients as joiners instead: |
Beta Was this translation helpful? Give feedback.
-
|
Understand. Thanks for your advice. |
Beta Was this translation helpful? Give feedback.
-
When I trying migrate some web app to sciter.js, I found many border shape css code can not work with sciter.js because of border behavior is not same with browser when width/height equals zero. For example, customize border's ::before/::after can get arrow/triangle in browser, but sciter.js is not. Is it design consideration or bug?
Beta Was this translation helpful? Give feedback.
All reactions